border-collapse必须写在table元素上才生效，写在tr、td、th或div上会被浏览器静默忽略；启用collapse后，相邻边框按宽度＞样式＞声明顺序优先级“竞选”胜出，且与border-spacing互斥、受display: table限制。
border-collapse必须写在table上才生效
加了border-collapse: collapse却没反应？90%是因为写错了位置。这个属性只对<table>元素本身起作用，写在<tr>、<td>、<th>甚至外层<div>上，浏览器直接忽略——连警告都不会报。
正确写法只有两种：
- CSS 中：
table { border-collapse: collapse; }（推荐） - 行内样式：
<table style="border-collapse: collapse">
如果你用的是 Ant Design、Bootstrap 等框架，它们常在重置 CSS 里把table设为separate，务必检查 computed 样式确认是否被覆盖。临时验证可用table { border-collapse: collapse !important; }，但长期应提高选择器权重，比如.my-table { border-collapse: collapse; }。
collapse后边框怎么“选”出来的？
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: none不参与竞争，会被其他方向的边框“穿透”显示。真要清掉某边，得用border-top: 0或明确设border-top: 1px solid transparent。
为什么还有白缝、双线、错位？
不是border-collapse没起作用，而是配套设置冲突或缺失：
-
border-spacing和collapse互斥——只要用了前者，后者自动失效；必须删掉所有border-spacing声明（包括框架注入的） - 给
table设了display: block或inline-block，border-collapse会静默失效；保持display: table（默认值）才能正常工作 -
table自身没设border（哪怕只是border: 1px solid transparent），会导致外框“消失”，只看到内部双线错觉 -
th和td的border值不统一（比如一个1px，一个2px），交界处必然加粗
视觉上还有“缝隙”？那大概率是padding撑开的，不是边框间距。统一清空td, th { padding: 0; }再观察真实贴合效果。
想控制某行/某列边框，别碰tr
tr上设border在collapse模式下基本无效，浏览器不渲染它。真正起作用的是单元格自身的单边边框。
典型做法：
- 第一行加顶边框：
tr:first-child td, tr:first-child th { border-top: 2px solid #333; } - 最后一列加右边框：
td:last-child, th:last-child { border-right: 2px solid #333; } - 去掉外边框只留内线：
table { border: none; }+td, th { border: 1px solid #ccc; }
别指望border-collapse帮你做响应式适配——它只管“怎么画线”，不管“画多宽”。小屏溢出问题得靠table { display: block; overflow-x: auto; }或媒体查询重排结构来解决。
