HTML表格如何设置双边框且间距为零-html教程-PHP中文网

必须设置border-collapse: collapse，否则双线错位堆叠；border-style: double需配合3px及以上宽度、显式颜色及table/th/td统一边框才能实现严格对齐的零间隙双线效果。

html表格如何设置双边框且间距为零

border-style: double 必须配 border-collapse: collapse 才能“间距为零”

直接写 border: 3px double #000 但没设 border-collapse: collapse，结果不是双边框间距为零，而是相邻单元格双线错位堆叠——视觉上像四条线挤在一起，中间还留白。这是因为浏览器默认用 border-collapse: separate，每个 <td> 的双线独立渲染，根本对不齐。 <p>真正让双线“贴合”、无间隙的关键，是强制表格边框模型合并：<code>border-collapse: collapse 会让所有相邻边框（包括 <table>、<code><th>、<code><td>）共用同一条边界线，double 才能按规范画出两条等宽实线 + 中间等宽空白，且上下左右严格对齐。 <ul><li>只给 <code><table> 加 <code>border-collapse: collapse 不够，必须同时作用于整个选择器链

推荐写法：table, th, td { border-collapse: collapse; } 或更稳妥地只设在 table 上，再统一设边框

内联样式里必须显式写：

<table style="border-collapse: collapse;">
<h3>为什么 border-spacing: 0 不起作用？</h3>
<p><code>border-spacing

只在 border-collapse: separate 模式下生效；一旦用了 collapse，这个属性就被忽略——所以设了 border-spacing: 0 却没加 collapse，等于白写。反过来，如果已经用了 collapse，再写 border-spacing 完全无效，还可能干扰其他布局。

常见误操作：看到表格有“间隙”，第一反应是调 border-spacing，结果发现双线还是错位。这时候该检查的不是 spacing，而是 collapse 是否真的生效、是否被其他 CSS 覆盖（比如某个重置样式表里写了 table { border-collapse: separate !important; }）。

用浏览器开发者工具检查 computed 样式，确认 border-collapse 的最终值是 collapse
避免在父级容器上设 font-size: 0 或负 margin 来“骗”掉间隙——这会破坏可访问性和打印效果

border: 3px double 是最小可靠宽度

2px double 在 Chrome 缩放 125% 时可能退化为单线，Safari 打印预览里也容易糊；1px double 基本不显示双线结构。W3C 规定 double 总宽度 = 3 × 单线宽度（两条实线 + 中间等宽空白），所以 3px double 实际占 9px 空间，足够稳定呈现。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

颜色不能省略：border: 3px double 缺少 color 时，部分旧版 Firefox 和 Edge 会完全不渲染双线；border-color 也不继承自 color，必须显式写，比如 #34495e 或 currentColor。

别用 thin/medium 这类关键字——它们和 double 不兼容，浏览器会降级为 solid
不要混搭单边样式，例如 border-top-style: double; border-left-style: solid → 双线会失效或仅部分显示
圆角（border-radius）和 double 天然冲突，Chrome 圆角处断开，Firefox 渲染变形，干脆禁用

如何验证双线是否真“间距为零”？

最直接的方法：放大到 200%，用像素尺量相邻单元格交点处的线条——理想状态是上下/左右双线完全重合，中间空白区清晰可见、宽度一致。如果出现“虚影”“毛边”或某条线偏移半像素，说明要么 border-collapse 没生效，要么用了非整数缩放比（如 110%）触发了 subpixel 渲染抖动。

另一个隐藏陷阱：深色背景上浅色双线（比如 #fff on #2c3e50）比浅底深线更容易看清中间空白；而 #000 on #fff 容易让两条黑线“粘连”，误判为单线。