border-collapse必须写在table元素上才生效，写在tr、td或div上会被浏览器静默忽略；正确写法为table { border-collapse: collapse; }或内联style，需注意框架重置、border-spacing冲突、display值及边框统一性。
border-collapse 必须写在 table 元素上才生效，其他位置全是白写。
为什么加了 border-collapse: collapse 却没反应？
90% 的情况是写错了选择器位置。这个属性只对 table 元素本身起作用，写在 tr、td、th 或外层 div 上，浏览器会静默忽略——不报错、不警告、也不渲染。
- ✅ 正确写法只有两种：
table { border-collapse: collapse; }（推荐）或<table style="border-collapse: collapse"> <li>⚠️ 框架重置 CSS 常偷偷把 <code>table设为separate，用浏览器开发者工具检查 computed 样式确认是否被覆盖 - ? 临时验证可用
table { border-collapse: collapse !important; }，但长期应提高选择器权重，比如.my-table { border-collapse: collapse; } - 宽度最大者胜出（
2px > 1px） - 样式更实者胜出（
solid > dashed > dotted） - 声明顺序靠后者胜出（CSS 文件中后写的规则，或更高权重的选择器）
-
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; }再观察真实贴合效果
border-collapse: collapse 后边框怎么“选”出来的？
它不是叠加，也不是取平均，而是让相邻边框按三重优先级“竞选”出一条胜出边框：
例如：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-collapse 生效的前提，是 table、th、td 的边框定义必须共存——缺一不可；光有合并指令，没有边框来源，结果就是“看不见的边框”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
