border-collapse必须写在table上才生效，写在td、tr或div上会被浏览器忽略；启用后需配合显式边框和box-sizing: border-box确保padding可见及列宽准确。
border-collapse必须写在table上才生效
很多人把border-collapse: collapse加到td、tr或外层div上，结果边框纹丝不动——浏览器直接忽略，这是最常见失效原因。它只对table元素本身起作用。
正确写法只有两种：table { border-collapse: collapse; }（推荐），或者内联样式<table style="border-collapse: collapse">。如果用了 Ant Design 或 Bootstrap，它们常重置table为separate，得检查开发者工具里的 computed 样式确认是否被覆盖。
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的。
立即学习“前端免费学习笔记（深入）”；
加了collapse还有白缝或双线？先查这三件事
不是属性写错了，而是配套冲突或遗漏：
-
border-spacing和collapse互斥——只要写了border-spacing（哪怕值是0），collapse就自动失效，必须删掉所有相关声明 - 给
table设了display: block或inline-block，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; }撑出清晰内线——此时相邻边框自动合并为单线
边框合并不是开关式操作，而是多个样式规则在底层博弈的结果；真正难的不是写collapse，而是理清谁的边框最终露出来。
