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">（行内样式，仅用于快速验证） <p>如果用了 Ant Design、Bootstrap 等框架，它们常默认设 <code>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一起看。-
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
