border-collapse: collapse 必须写在table元素上才生效，写在td、tr或div上无效；其边框合并按宽度>样式>声明顺序优先级胜出，且与border-spacing互斥，配套条件缺失会导致“加了没反应”。
border-collapse: collapse 必须写在 table 元素上才生效，写在 td、tr 或外层 div 上完全无效——这是 90% “加了没反应”的根本原因。
为什么写了 border-collapse: collapse 却还是双线？
不是属性写错了，而是配套条件没满足：
-
border-spacing和border-collapse: collapse互斥；只要存在任何border-spacing声明（哪怕值是0），浏览器就自动降级为separate模式 -
table的display值被改成block、inline-block等非表格值时，border-collapse直接失效 -
table自身没设border（哪怕只是border: 1px solid transparent），会导致外框“消失”，只看到内部边框错位或加粗的假象 - UI 框架（如 Ant Design）或 CSS 重置库（如 normalize.css）常默认设
table { border-collapse: separate; }，需用更高权重覆盖
border-collapse: collapse 后边框到底显示哪一条？
不是取平均、也不是叠加，而是三重优先级“竞选”：
- 宽度最大者胜出：
2px>1px - 样式更实者胜出：
solid>dashed>dotted - 声明顺序靠后者胜出：CSS 文件中后写的规则、或选择器权重更高的规则生效
例如：th { border-bottom: 1px solid #333; } 和 td { border-top: 1px solid #666; } 同时存在，若 td 规则在后，则交界处显示 #666；但如果 th 规则里是 2px solid #333，哪怕写在前面，也会胜出。
border: none 不参与竞争——它会被其他方向的边框“穿透”，比如 td { border: none; border-top: 1px solid #000; } 才能真正控制单边。
如何实现“只有内线、无外框”？
别碰 border-spacing，它在 collapse 下完全无效。正确做法是：
- 保留
table { border-collapse: collapse; } - 用
table { border: none; }或table { border: 1px solid transparent; }隐藏外框 - 靠
th, td { border: 1px solid #ccc; }统一撑出清晰内线 - 若要突出某行/列，不能操作
tr（它在collapse下基本不渲染边框），而要写：tr:first-child th, tr:first-child td { border-top: 2px solid #333; }或td:last-child, th:last-child { border-right: 2px solid #333; }
容易被忽略的是：启用 collapse 后，table 的盒模型表现和 separate 模式完全不同——总宽度不再等于所有 td 宽度之和加两倍边框，调试时得连同 table 的 border 和 padding 一起看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
