border-collapse: collapse必须写在table元素上才生效，写在td、tr或div上会被浏览器静默忽略；它通过宽度>样式>声明顺序三重优先级合并边框，是唯一真正消除单元格空隙的方式。
border-collapse: collapse 是唯一能真正物理消除单元格空隙的方式，其他方法只是视觉掩盖或治标不治本。
为什么 border-collapse: collapse 必须写在 table 上
浏览器只认 table 元素上的 border-collapse 声明，写在 td、tr 或外层 div 上会被静默忽略——这是 90% “加了没反应”的根源。框架如 Ant Design 或 Bootstrap 往往默认注入 table { border-collapse: separate; }，必须用 DevTools 的 Computed 面板确认最终计算值，不能只看源码。
临时验证可用 !important，但长期应提高选择器权重，例如：.my-table { border-collapse: collapse; } + <table class="my-table">。<h3>
<code>border-spacing: 0 为什么经常失效
border-spacing 只在 border-collapse: separate 下起作用；一旦计算值是 collapse，该属性直接被规范忽略（DevTools 里可能标为 “invalid”）。常见干扰包括：
立即学习“前端免费学习笔记（深入）”；
- 全局 CSS 重置（如
* { margin: 0; padding: 0; }）不会影响它，但框架常自带border-spacing: 0 1px -
table被设为display: block或inline-block后，border-spacing完全失效 - 双值写法必须都为零：
border-spacing: 0 0，写成0%或0em不合法
边框合并后怎么避免双线、白缝或错位
border-collapse: collapse 不是简单“取平均”，相邻边框按三重规则竞争：
- 宽度最大者胜出（
2px>1px） - 样式更实者胜出（
solid>dashed>dotted） - 声明顺序靠后者胜出（CSS 文件中后写的、权重更高的规则）
所以务必统一 th 和 td 的边框定义：th, td { border: 1px solid #ccc; }。别给 tr 设边框（它在 collapse 模式下基本无效），想突出某列就操作 td:last-child；border: none 不参与合并，要用单边控制，例如：td { border-top: 1px solid #000; border-right: none; }。
那些容易被忽略的“伪空隙”来源
即使 border-collapse 正确生效，仍可能看到缝隙，原因常不在表格本身：
-
table父容器有font-size: 0，而 HTML 换行或空格字符被渲染为微小间隙（尤其在表格底部/右侧） -
td内嵌了带默认margin的元素（如p、h2），它们的外边距会撑开单元格高度 - 用了
outline或box-shadow，制造出类似空隙的视觉效果 - 移动端 WebView 缩放时短暂闪现缝隙——不是 bug，是渲染延迟，无需修复
最稳妥的做法：先确保 table { border-collapse: collapse; } 生效，再逐项排查边框统一性、内嵌元素 margin、以及父级 font-size 或 outline 干扰。
