border-collapse: collapse 是表格边框合并的正确用法，必须作用于 table 元素，使相邻单元格边框按宽度>样式>声明顺序优先级合并为单线，且与 border-spacing 互斥。
HTML 表格边框塌陷不是 bug，是 border-collapse 的默认行为 —— 它本意是让表格看起来更紧凑，但常被误认为“边框消失”或“错位”。
什么是 border-collapse: collapse？
这是表格的默认边框渲染模式。当启用时，相邻单元格（td/th）的边框会“合并”成一条线，宽度取两者中较大者，颜色取先声明的（或按层叠规则）。这不是塌陷，是主动合并。
- 常见误解：看到“只有一条线”，以为某侧边框“没了”
- 真实表现：
border: 1px solid red+border: 2px solid blue相邻 → 渲染为2px solid blue的单线 - 影响范围：仅作用于
table及其内部单元格，不涉及外层容器
border-collapse: separate 怎么用？
切换为分离模式后，每个单元格边框独立绘制，不再合并。这时需显式设置 border-spacing 控制间距，否则默认为 2px，可能造成意外空白。
- 必须同时设置：
border-collapse: separate+border-spacing: 0才能模拟“无合并但无间隙”的视觉效果 -
border-spacing不接受负值；若要“压紧”，只能回到collapse模式 - IE 支持良好（IE8+），但
border-spacing在 quirks mode 下可能失效
为什么加了 border 还看不见边框？
最常见原因是父级容器或 CSS 重置干扰了表格渲染上下文，比如：
- 外部
div设置了overflow: hidden，且表格内容溢出导致边框被裁剪 - 全局 CSS 重置（如 normalize.css）把
table的border-collapse改成了separate，但没配border-spacing -
td内部元素（如div）设置了margin，撑开单元格却未触发边框重绘（实际是 padding 更安全）
验证方法：直接在 table 元素上写内联样式 style="border: 1px solid #000; border-collapse: collapse;"，看是否立即出现边框 —— 若出现，说明是层叠或继承问题。
border-collapse 和 BFC 无关
别试图用 overflow: hidden 或 display: flow-root “修复”表格边框 —— 这些对 table 元素无效。表格有自己的格式化上下文（table formatting context），不受普通 BFC 触发条件影响。
-
display: flow-root对table无效（会强制转为 block，破坏表格语义和布局） -
overflow在table上仅控制 tbody 溢出，不改变边框合并逻辑 - 真正可控的只有：
border-collapse、border-spacing、各单元格的border声明顺序与权重
复杂点在于：边框合并优先级依赖声明顺序和 specificity，同一方向的边框（如两个 td 的右/左 border）谁“赢”不是直觉能猜准的，调试时建议用 DevTools 的 computed 样式逐层检查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
