border-collapse的取值决定表格边框渲染逻辑：collapse合并相邻边框为单线并忽略border-spacing和empty-cells；separate保持边框分离，使border-spacing和empty-cells生效；inherit极少实用。
border-collapse 的取值不是“选个好看的”，而是直接决定表格边框渲染逻辑的底层开关。用错值，border-spacing 会失效、empty-cells 会被忽略、甚至出现双线重叠或空白单元格显示异常——这些都不是样式问题，是渲染模型切换失败。
什么时候必须用 collapse
要实现标准“细线表格”（即所有相邻边框合并为单根线），border-collapse: collapse 是唯一可靠方案。它强制浏览器采用“边框共享”模型，让 th 和 td 的 border 不再各自绘制，而是按优先级合并（比如颜色冲突时取上/左单元格的边框）。
- 必须写在
table元素上，写在th或td上无效 - 一旦启用，
border-spacing完全被忽略，设了也无效果 - 空单元格（
<td></td>）是否显示边框，由empty-cells: show | hide控制，但该属性在collapse下同样失效 - 常见错误：给
table设了collapse，却还留着border-spacing: 2px，徒增调试困惑
什么时候得用 separate
border-collapse: separate 是默认行为，适合需要控制单元格间距、保留 HTML 原生边框叠加效果、或配合 empty-cells 精确控制空单元格渲染的场景。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
border-spacing只在此模式下生效，可设为border-spacing: 0 0模拟无间隙，但视觉上仍是“双线”（上下/左右边框不合并） - 当表格需嵌套在其他布局中，且父容器有背景色时，
separate能避免collapse下边框被裁剪或错位（尤其在缩放或高 DPI 屏幕下） - 若用 CSS Grid 或 Flex 模拟表格结构，反而不该用
collapse——它只对原生table元素起作用 - 注意：
separate下，th和td的border颜色/宽度不同时，交界处会同时显示两条线，这不是 bug，是预期行为
inherit 的实际价值很低
inherit 理论上能从父元素继承 border-collapse 值，但现实中极少有用武之地。
- HTML 中
table几乎不会嵌套在另一个设置了border-collapse的table内，父级通常没有该属性 - 若真需要统一多个表格样式，直接批量写
table { border-collapse: collapse; }更清晰可控 - IE9+ 虽支持
inherit，但旧版 IE 对表格渲染本就不可靠，加这一层继承反而增加兼容性风险
真正容易被忽略的点是：没有 !DOCTYPE 声明时，某些浏览器会触发怪异模式（Quirks Mode），导致 border-collapse 行为不一致——哪怕写了 collapse，也可能退化成 separate。这个坑不在 CSS 本身，而在 HTML 文档头是否规范。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
