border-collapse: collapse 必须作用于 table 元素才生效，写在 td、tr 或 div 上无效；其边框合并按宽度、样式、声明顺序三重优先级竞争胜出；失效常见原因包括 border-spacing 冲突、table display 非表格值、外框未设 border。
border-collapse: collapse 必须写在 table 元素上才生效
写在 td、tr 或外层 div 上完全无效，浏览器会静默忽略。这是 90% “加了却没反应”问题的根源。
- 正确做法只有两种：
table { border-collapse: collapse; }（推荐），或行内样式<table style="border-collapse: collapse"> - 若项目用了 Ant Design、Bootstrap 等 UI 框架，它们常通过重置 CSS 把
table的border-collapse设为separate，需检查 computed 样式确认是否被覆盖 - 临时验证可用
table { border-collapse: collapse !important; }，但长期应提高选择器权重（如加类名或用body .my-table）
合并后边框粗细/颜色不对？其实是“边框竞争”在起作用
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的
为什么加了 collapse 还有白缝或双线？先查这三件事
常见失效不是属性写错，而是配套缺失或冲突：
-
border-spacing与collapse互斥——只要用了前者，后者自动降级为separate；必须删掉所有border-spacing相关声明（包括框架注入的） - 给
table设置了display: block、inline-block等非表格 display 值，border-collapse就会失效；改用width、margin控制布局 -
table自身没设border（哪怕border: 1px solid transparent），会导致外框“消失”，只看到内部双线错觉；同时th和td的border值不统一（比如一个1px，一个2px），交界处必然加粗
要“只有内线、无外框”，不能靠 border-spacing
border-collapse: collapse 下 border-spacing 完全无效，别试 border-collapse: collapse; border-spacing: 0; 这种组合。
立即学习“前端免费学习笔记（深入）”；
- 真正做法是：保留
collapse，然后用table { border: none; }或table { border: 1px solid transparent; }隐藏外框 - 再靠
th, td { border: 1px solid #ccc; }撑出清晰内线——此时相邻边框自动合并为单线 - 首列/末列多出半条线？用
th:first-child, td:first-child { border-left: none; }微调；首行顶边太细？直接给th:first-child, td:first-child { border-top: 2px solid #333; }，别碰tr
最常被忽略的一点：合并后，table 的总宽度不再等于所有 td 宽度之和加两倍边框；共享边框只算一次，响应式布局时若按旧逻辑计算，容易错位。
