border-collapse属性必须设在table元素上，因它是表格级样式，对tr、td无效；设为collapse可合并相邻边框（取宽、实、后声明者），但empty-cells在collapse下失效，移动端可能渲染错位。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

border-collapse属性必须设在

上，不是或

很多人试过给 td 加 border，再设 tr 的 border-collapse: collapse，结果没用——因为 border-collapse 是表格级样式，只对 table 元素生效。

常见错误现象：td 边框看起来双倍粗、有空隙、内边距撑开；或者加了 border-collapse: collapse 但完全没反应。

• 必须写在 <table style="border-collapse: collapse"> 或对应 CSS 类里 <li>如果用了 <code>border-spacing，它会和 border-collapse 冲突，后者优先级更高，但建议直接删掉 border-spacing 避免混淆
• IE8+ 支持 collapse，但 IE7 及更早只支持 separate（此时设 collapse 会被忽略）

collapse模式下，相邻边框如何“合并”而不是“叠加”

启用 border-collapse: collapse 后，td、th、tr 的边框不再各自渲染，而是按“边框冲突规则”合并：取宽度最大、样式最实（如 solid > dashed）、颜色优先（按声明顺序，后声明的胜出）。

使用场景：想让表格看起来像 Excel 那样无缝网格，或者需要统一控制外边框粗细时。

立即学习“前端免费学习笔记（深入）”；

• 如果某列 th 设了 border-bottom: 2px solid #333，而下一行 td 是 border-top: 1px solid #666，最终显示的是 2px #333
• 避免混用 none 和 solid——none 会被忽略，不参与合并计算
• 想让所有单元格共享同一条线？统一设 border: 1px solid #ccc 在 td, th 上，比单独调上下左右更可靠

border-collapse: collapse 和 empty-cells 的关系

当表格里有空单元格（比如 <td></td>），默认会留白；empty-cells: hide 能让它彻底消失，但这只在 border-collapse: separate 下有效。一旦用了 collapse，empty-cells 就被无视了。

所以如果你发现空 td 还是占位、影响对齐，别去调 empty-cells，得换思路：

• 确保空单元格至少含一个零宽字符，比如  ，否则 collapse 模式下它的边框可能“塌陷”进邻近单元格
• 若需隐藏空单元格，用 JS 清理或后端过滤，CSS 层面在 collapse 下无解
• empty-cells 的兼容性本身较差（Safari 5.1+、Firefox 1+），不如直接避免空单元格

移动端适配时，border-collapse可能引发缩放错乱

部分 iOS Safari 在 viewport 缩放或横屏切换后，border-collapse: collapse 表格偶尔出现边框错位、虚线抖动，本质是渲染层对像素对齐的处理异常。

这不是 bug，而是 collapse 模式依赖精确的盒模型计算，在 sub-pixel 场景下容易失准。

• 临时缓解：给 table 加 transform: translateZ(0) 强制 GPU 加速（慎用，可能增加内存占用）
• 更稳方案：改用 border-collapse: separate + border-spacing: 0，视觉几乎一样，且兼容性更好
• 注意：某些 CSS-in-JS 库（如 styled-components）可能把 border-collapse 插入到 td 规则里，导致失效——务必检查生成的最终样式作用对象
事情说清了就结束。真正麻烦的不是怎么写，而是哪一层该写、哪一层不该写，以及浏览器什么时候悄悄绕过你的设定。