border-collapse: collapse 是消除表格单元格缝隙的首选方案，它使相邻边框物理合并而非仅设间距为0，IE8+全兼容且无边框加倍问题。
直接用 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> 可选：去掉外边框 </em>/
table { border: none; }</p><p>/<em> 可选：去掉单元格内边距（即 cellpadding 效果）</em>/
td, th { padding: 0; }</p><p>/<em> 可选：统一边框，避免某些浏览器默认渲染 </em>/
td, th { border: 1px solid #ccc; }
</style></p><p><table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>注意：border-collapse 必须作用于 table 元素本身，写在 td 或 tr 上无效；另外，如果用了 outline 或 box-shadow，也会制造伪“缝隙”，需一并检查。
立即学习“前端免费学习笔记（深入）”；
移动端或响应式表格里容易被忽略的一点
当表格内容溢出、触发横向滚动时，border-collapse: collapse 依然有效，但部分安卓 WebView 在缩放后可能短暂闪现缝隙——这不是 bug，而是渲染延迟。解决方案只有：确保父容器设 overflow-x: auto，且表格不设固定宽（用 min-width 替代），避免强制重排。
