如何控制HTML表格的边距重叠？详细解析BORDER属性层级关系-html教程-PHP中文网

border-collapse 是控制 html 表格边框是否重叠的唯一有效入口，必须设为 collapse 才能消除双线；需在 table 上声明 border-collapse: collapse、外边框及 th/td 内边框三者缺一不可，且 border-spacing 仅在 separate 模式下生效。

如何控制html表格的边距重叠？详细解析border属性层级关系

直接说结论：border-collapse 是控制 HTML 表格边框是否重叠的唯一有效入口，其他所有边框设置（包括 border、cellspacing、甚至 table 和 td 上分别写的边框）都必须在这个前提下才有意义。

为什么加了 border 还是双线？

浏览器默认用 border-collapse: separate，每个 td 和 th 都独立画自己的边框。左边单元格的右边框 + 右边单元格的左边框 = 视觉上两条线叠在一起，中间还夹着默认 border-spacing: 2px 的空白缝。

只给 table 设 border: 1px solid #000 → 结果只有外框，内部没线
用了过时的 border="1" → Chrome/Firefox 渲染出粗细不均、颜色不可控的断续边框
给 th 和 td 都加了 border，但漏掉 border-collapse: collapse → 边框依然双线、错位

border-collapse 必须写在 table 上，且不能省略

border-collapse 是表格级布局属性，只对 table 元素生效；写在 tr、th 或 td 上完全无效。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

正确三步声明（缺一不可）：
table { border-collapse: collapse; }
table { border: 1px solid #333; }（外边框，可选但建议设）
th, td { border: 1px solid #333; }（内边框，值必须和外边框一致）
如果 th 边框是 2px 而 td 是 1px，合并后交界线会变成 2px，视觉断裂明显
第三方 UI 库（如 Ant Design）常默认设 border-collapse: collapse，你覆盖时得用更高优先级选择器或 !important

border-spacing 只在 separate 模式下起作用

border-spacing 是唯一符合 HTML5 标准、真正控制单元格物理间距的方式，但它只在 border-collapse: separate 时生效，且第一个值管列间距（水平），第二个值管行间距（垂直）。

border-spacing: 4px 12px → 列距 4px，行距 12px（不是上下 4px、左右 12px）
border-spacing 不支持 %、em、负值；单位只能是 px、rem、vw 等合法长度单位
写在 td 上完全无效，也不继承；margin 对 td 和 th 完全无效
想让文字离边框远点 → 改 td, th { padding: 8px }；想让两列之间宽一点 → 改 table { border-spacing: 12px 0 }