border-collapse: collapse 必须写在 table 元素上才生效，写在 td、tr 或 div 上无效；需确保无 border-spacing、display 非 table、table 有 border、单元格 padding 为 0，并理解边框合并优先级规则。
border-collapse: collapse 必须写在 table 元素上才生效
写在 td、tr 或外层 div 上完全无效，浏览器会静默忽略。这是“加了却没反应”的最常见原因。
正确做法只有两种：
-
table { border-collapse: collapse; }（推荐，写在 CSS 文件中） -
<table style="border-collapse: collapse">（行内样式，仅用于快速验证）
如果用了 Ant Design、Bootstrap 等框架，它们常默认设 table { border-collapse: separate; }，需检查 computed 样式确认是否被覆盖；临时可加 !important，但长期应提高选择器权重，比如用 .my-table { border-collapse: collapse; }。
为什么写了 collapse 还是双线或白缝
不是属性没起作用，而是配套设置缺失或冲突：
立即学习“前端免费学习笔记（深入）”；
-
border-spacing与collapse互斥——只要存在任何border-spacing声明（包括框架注入的），collapse就会降级为separate；必须全局搜索并删掉所有border-spacing -
table被设了display: block或inline-block，会导致border-collapse失效；改用width、margin控制布局 -
table自身没设border（哪怕border: 1px solid transparent），外框可能“消失”，只看到内部错位双线；同时th和td的border宽度不一致（如一个2px、一个1px），交界处必然加粗
视觉上还有“缝隙”？大概率是 padding 撑开的，不是边框间距。统一清空：td, th { padding: 0; } 再观察真实贴合效果。
合并后边框颜色/粗细不对，其实是“边框竞争”规则在起作用
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 不参与合并计算，会被其他方向的边框“穿透”显示——想让某单元格某边有线，得单独写单边，比如：td { border-top: 1px solid #000; border: none; }。
想突出某行/某列边框，不能操作 tr，得从 td/th 入手
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: collapse 后，table 的总宽度不再等于所有 td 宽度之和加两倍边框——内部边框被合并计算，盒模型表现完全不同。调试时别只盯着 td 的 width，要连同 table 的 border 和 padding 一起看。
