border-collapse必须写在table元素上才生效，写在td、tr或div上无效；常见失效原因是位置错误、border-spacing冲突、table无边框或被框架重置为separate。
border-collapse必须写在table上才生效
加了border-collapse: collapse却没反应？90%是写错位置了。它只对table元素起作用，写在td、tr或外层div上，浏览器直接忽略。
正确写法只有两种：
-
table { border-collapse: collapse; }（推荐，语义清晰） <table style="border-collapse: collapse">（临时调试可用） <p>用 Ant Design 或 Bootstrap 时，它们常把<code>table的border-collapse重置为separate，务必在开发者工具里检查 computed 样式确认是否被覆盖。为什么还是双线或有白缝？先查这三件事
不是属性没生效，而是配套条件没满足：
-
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-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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
