border-collapse: collapse 只对 table 元素生效，写在 td/th 上无效；需检查 computed 样式确认未被覆盖，并注意 border-style: hidden/none 的干扰及 collapse 下边框竞争规则。
border-collapse: collapse 必须写在 table 元素上
写了但没效果？大概率是把它加到了 td 或 th 上。这个属性只对 table 元素本身生效，浏览器根本不认 td { border-collapse: collapse; } 这种写法。
检查 Elements 面板中 table 的 computed 样式，确认 border-collapse 确实是 collapse，且没被更高优先级规则（比如某些 UI 框架的重置样式）覆盖。
常见干扰项：
-
table { border-style: hidden; }会彻底压制边框渲染，哪怕写了border-width也看不见 - 某些 CSS 重置库（如 normalize.css）可能默认设了
border-style: none，得手动覆盖 -
display: block或display: inline-table可能导致部分浏览器忽略collapse行为（虽现代浏览器基本已修复）
合并后边框粗细/颜色不一致？看“胜出规则”而不是猜
启用 border-collapse: collapse 后，相邻单元格的边框不会简单叠加，而是按固定优先级“竞争”：宽度 > 样式（solid > dashed） > 颜色（深色倾向胜出，但非绝对）。
典型现象：表头 th { border-bottom: 2px solid red; } 和下面一行 td { border-top: 1px solid #999; } 并排时，最终显示的却是 1px ——因为 td 的样式声明在 CSS 中位置靠后，且它的 border-top 与 th 的 border-bottom 直接竞争，而宽度小的一方输了。
稳妥做法：
- 统一在
td, th上定义border-style和border-color，避免混用tr和td - 需要某一边更粗？直接用单边属性，例如
th { border-bottom-width: 2px; } - 想让外边框消失、只留内线？
table { border: none; }+td, th { border-left: 1px solid #eee; border-bottom: 1px solid #eee; }
border-spacing 在 collapse 模式下完全无效
别试 table { border-collapse: collapse; border-spacing: 0; } ——后者会被浏览器静默忽略。这是规范行为，不是 bug。
border-spacing 只在 border-collapse: separate（默认值）下起作用。一旦切到 collapse，单元格间距归零，边框是否“贴住”只取决于你给 td/th 设的 border 和 padding。
替代方案：
- 控制视觉间距：用
padding替代border-spacing，它在collapse下照常工作 - 要模拟“带间隙的合并边框”？只能用伪元素或额外 wrapper，CSS 原生不支持
首行/末行/首列/末列多出半条线？用伪类微调
即使所有 td/th 都设了 border-left 和 border-bottom，表格左边界和上边界仍可能因 table 自身边框或第一个单元格的边框“溢出”而显得多余。
典型补救：
- 去掉最左列边框：
td:first-child, th:first-child { border-left: none; } - 去掉最后一行底边框：
tr:last-child td { border-bottom: none; } - 表头顶部多余线？
thead th { border-top: none; }，但注意table的上边框可能还在，需一并设table { border-top: none; }
这些调整必须基于实际渲染结果来加，不能靠“应该没问题”跳过验证——不同浏览器对 first-child 的计算细节仍有微小差异，尤其在动态插入行后。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
