HTML表格如何取消单元格之间的缝隙（代码分享）-html教程-PHP中文网

border-collapse: collapse 是消除表格单元格缝隙的首选方案，它使相邻边框物理合并而非仅设间距为0，ie8+全兼容且无边框加倍问题。

html表格如何取消单元格之间的缝隙（代码分享）

直接用 border-collapse: collapse 就能彻底消除 td 和 th 之间的缝隙，这是最可靠、浏览器兼容性最好的方式。其他方法要么残留视觉间隙，要么引发边框叠加问题。

为什么 `border-collapse: collapse` 是首选

HTML 表格默认使用 border-collapse: separate，此时每个单元格有独立边框，border-spacing 控制它们之间的距离。设为 collapse 后，相邻边框自动合并成一条线，缝隙自然消失——不是“隐藏”，而是物理上不存在了。

无需处理 cellpadding 或 cellspacing 属性（这些是过时的 HTML 属性，CSS 优先级更高）
对 th、td、tr 都生效，不用逐个写样式
IE8+ 全支持，现代浏览器无兼容风险
如果同时设置了 border，合并后边框宽度不会加倍（对比 border-spacing: 0）

`border-spacing: 0` 看似简单，但容易出错

它只是把间距设为 0，但边框仍是分离的。结果是：左右/上下相邻单元格的边框会并排显示，导致该位置边框变粗（比如你设了 1px solid #000，两格相接处就变成 2px），视觉上仍像有“缝”。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

仅适用于不需要统一边框宽度的场景（例如纯背景色表格）
若要模拟合并效果，必须额外给 table 设 border-bottom 和 border-right，再给 td 设 border-top 和 border-left——代码冗余且难维护
在某些旧版 Safari 中，border-spacing 对 colgroup 或 col 不生效

完整可运行示例（含常见陷阱）

<style>
  /* 关键：这一行必须写 */
  table { border-collapse: collapse; }
<p>/<em> 可选：去掉外边框 /
table { border: none; }<p>/<em> 可选：去掉单元格内边距（即 cellpadding 效果）/
td, th { padding: 0; }<p>/<em> 可选：统一边框，避免某些浏览器默认渲染 /
td, th { border: 1px solid #ccc; }
</style><p></p>

A	B
C	D

注意：border-collapse 必须作用于 table 元素本身，写在 td 或 tr 上无效；另外，如果用了 outline 或 box-shadow，也会制造伪“缝隙”，需一并检查。

移动端或响应式表格里容易被忽略的一点

当表格内容溢出、触发横向滚动时，border-collapse: collapse 依然有效，但部分安卓 WebView 在缩放后可能短暂闪现缝隙——这不是 bug，而是渲染延迟。解决方案只有：确保父容器设 overflow-x: auto，且表格不设固定宽（用 min-width 替代），避免强制重排。