border-collapse: collapse必须作用于table元素才生效，写在td、tr或div上无效；其边框合并按宽度、样式、声明顺序三重优先级竞争胜出；失效常见原因包括border-spacing冲突、table display非表格值、外框未设border。
border-collapse: collapse 必须写在 table 上才生效
写了但没效果？90% 是写错位置了。border-collapse 只对 table 元素本身起作用，写在 td、tr 或外层 div 上，浏览器直接忽略。检查开发者工具的 Computed 样式，确认 border-collapse 确实是 collapse，且没被 Ant Design、Bootstrap 等框架重置为 separate。
为什么加了 border-collapse: collapse 还有白缝或双线？
不是属性失效，而是三个常见配套条件没满足：
-
border-spacing和collapse互斥——只要 CSS 里存在任何border-spacing声明（包括框架注入的），collapse就自动失效；必须全局删掉 -
table被设了display: block或inline-block，会彻底禁用border-collapse；改用width、margin控制布局 -
table自身没设border（哪怕border: 1px solid transparent），会导致外框“消失”，只看到内部交界处加粗，误以为是双线
合并后边框粗细/颜色不一致，怎么精确控制？
border-collapse: collapse 不是取平均或叠加，而是按三重优先级“竞选”：
- 宽度最大者胜出（
2px > 1px） - 样式更实者胜出（
solid > dashed > dotted） - 声明顺序靠后者胜出（CSS 文件中后写的、权重更高的选择器）
例如：th { border-bottom: 2px solid #333; } 和 td { border-top: 1px solid #666; } 同时存在，横向线显示为 2px solid #333；但如果 td 规则写在后面且宽度相同、样式相同，它的颜色就可能覆盖 th 的。真正稳的做法是统一 border-style 和 border-color，再单独用 border-width 调各边。
想只有内线、无外框，别碰 border-spacing
border-collapse: collapse 下 border-spacing 完全无效，border-collapse: collapse; border-spacing: 0; 这种组合纯属多余。正确做法是：
- 保留
table { border-collapse: collapse; } - 用
table { border: none; }或table { border: 1px solid transparent; }隐藏外框 - 再靠
th, td { border: 1px solid #ccc; }撑出内线——此时相邻边框自动合并为单线
容易被忽略的是：如果 th 设了 2px 而 td 是 1px，交界处必然变成 2px，视觉断裂明显；统一宽度和样式才是稳定输出的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
