border-collapse: collapse 必须作用于 table 元素，仅对 table 生效；需配合显式 border 设置（table 及 th/td 均需定义）才能显示合并边框；相邻边框按宽度＞样式＞声明顺序优先级竞争；border-spacing 在 collapse 下无效。
border-collapse: collapse 必须写在 table 元素上
这个属性只对 table 元素本身生效，加在 td、th、tr 或外层 div 上完全无效。浏览器会直接忽略——不是“没起作用”，而是压根不认。常见错误包括：td { border-collapse: collapse; } 或用 display: table 模拟表格却忘了给该元素设 border-collapse。
合并后没边框？因为 td 和 th 缺少显式 border
border-collapse: collapse 只负责“合并逻辑”，不负责“画线”。如果单元格没定义 border，合并的是一条宽度为 0 的线，自然看不见。
- 必须三者齐备：
table { border-collapse: collapse; }+table { border: 1px solid #333; }（外边框） +th, td { border: 1px solid #333; }（内边框） - 漏掉最后一句，表格内部就是空白，只剩一个空壳外框
- 某些重置库（如 normalize.css）默认设了
border-style: none，得手动覆盖
边框粗细/颜色不一致？看“胜出规则”，不是随机
启用 border-collapse: collapse 后，相邻边框不会叠加，而是按固定优先级竞争：宽度 > 样式（solid > dashed） > 声明顺序（后写的覆盖先写的）。典型现象：
-
th { border-bottom: 2px solid red; }和下方td { border-top: 1px solid #999; }并排 → 显示 2px red（宽度胜出） - 同宽同样式时，
td规则写在th后面 →td的border-top覆盖th的border-bottom - 想让某单元格只留顶边？必须写
td { border: none; border-top: 1px solid #000; }，否则none会被邻边“穿透”
border-spacing 在 collapse 下彻底失效
一旦设了 border-collapse: collapse，border-spacing 就被浏览器静默忽略——这是规范行为，不是 bug。别写 table { border-collapse: collapse; border-spacing: 0; }，后者纯属冗余。
- 想控制视觉间距？用
td, th { padding: 8px 12px; }，它在collapse和separate下都有效 - 想模拟“带间隙的合并边框”？CSS 原生不支持，只能靠伪元素或额外 wrapper
- 首列/末行多出半条线？用
th:first-child, td:first-child { border-left: none; }微调
真正容易被忽略的是盒模型变化：启用 collapse 后，table 总宽度 ≠ 所有 td 宽度之和 + 两倍边框 —— 内部边框不再各自占空间，算宽时得连 table 自身的 border 和 padding 一起看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
