border-collapse必须写在table元素上才生效，写在td、tr或div上会被浏览器忽略；正确写法为table { border-collapse: collapse; }或内联style，需注意框架重置、border-spacing冲突、display值及边框统一性。
border-collapse必须写在table上才生效
写在td、tr或外层div上完全没用，浏览器会静默忽略。这是90%“加了没反应”的根源。
正确做法只有两种：table { border-collapse: collapse; }（推荐），或直接在HTML里写<table style="border-collapse: collapse">。
如果用了 Ant Design、Bootstrap 等框架，它们常把table的border-collapse重置为separate，需打开开发者工具检查 computed 样式确认是否被覆盖。临时验证可用table { border-collapse: collapse !important; }，但长期应提高选择器权重（比如加类名.my-table）。
加了collapse还是双线/有缝？先查这三件事
不是属性写错，而是配套缺失或冲突：
立即学习“前端免费学习笔记（深入）”；
-
border-spacing没删干净——只要它存在，border-collapse: collapse就自动降级为separate；全局搜border-spacing，连框架注入的也要干掉 -
table被设了display: block或inline-block——border-collapse只在display: table及其变体下有效；改用width、margin控制布局 -
table自身没设border（哪怕border: 1px solid transparent），或th/td的边框值不统一（比如一个1px、一个2px），交界处必然加粗或错位
合并后边框粗细/颜色不对？其实是“边框竞争”规则在起作用
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的。
想确保表头线显眼？统一写：th, td { border: 1px solid #ccc; }；要强制某一边生效（如首行底边必须是2px），用单边属性：th:first-child { border-bottom: 2px solid #333; }，并确保选择器权重足够。
padding撑开“缝隙”？不是边框间距，是盒模型没调好
视觉上还有“缝隙”，大概率是td、th的padding撑开的，不是边框间距。统一清空：td, th { padding: 0; }再观察真实贴合效果。
但真要留白，不能只设padding——border-collapse: collapse下，td默认box-sizing: content-box，width + padding + border会超宽，导致列崩、换行。
稳的做法是：td, th { box-sizing: border-box; padding: 8px; }，让width包含内边距和边框。即使项目全局设了* { box-sizing: border-box; }，也建议显式加到td、th上，避免老版 reset 覆盖。
