border-collapse: separate 和 collapse 的视觉差异在于边框绘制逻辑：separate 模式下每个单元格独立渲染四条边框，collapse 模式下相邻单元格共享一条边框线，通过宽度＞样式＞声明顺序的优先级规则“竞选”胜出边框，且仅作用于 table 元素。
border-collapse: separate 和 collapse 的视觉差异到底在哪
区别不在“有没有边框”，而在“谁画边框、怎么画”。separate 模式下，每个 th 和 td 都独立渲染自己的四条边框；collapse 模式下，相邻单元格共享一条边框线——左边单元格的右边界和右边单元格的左边界合并成一条线，上边单元格的下边界和下边单元格的上边界也合并。你看到的“双线”“加粗”“缝隙”，几乎全是 separate 在默认行为下的自然结果。
为什么写了 border-collapse: collapse 却没反应
最常见原因是它没写在 table 元素上。这个属性只对 table 生效，写在 tr、td 或外层 div 上完全无效。另一个高发原因是同时存在 border-spacing 声明——哪怕值是 0，浏览器也会自动降级回 separate 模式。
-
table的display被改成block或inline-block：border-collapse直接失效 - UI 框架（如 Ant Design）或 CSS 重置库（如 normalize.css）默认设了
table { border-collapse: separate; }，必须用更高权重覆盖 -
table自身没设border（哪怕只是1px solid transparent），会导致外框“消失”，只看到内部边框错位或加粗的假象
collapse 模式下边框颜色/宽度冲突怎么解决
合并不是取平均，也不是叠加，而是三重优先级“竞选”：宽度最大者胜出 → 样式更实者胜出（solid > dashed > dotted）→ 声明顺序靠后者胜出。比如 th { border-bottom: 2px solid #333; } 和 td { border-top: 1px solid #666; } 同时存在，交界处显示的是 2px #333；但如果两者都是 1px solid，后写的规则颜色生效。
-
border: none不参与竞选——它会被其他方向的边框“穿透”，例如td { border: none; border-top: 1px solid #000; }才能真正控制单边 - 想突出某行？别操作
tr（它在collapse下基本不渲染边框），改用tr:first-child th, tr:first-child td { border-top: 2px solid #333; } - 要实现“只有内线、无外框”，用
table { border: none; }或table { border: 1px solid transparent; }，再统一设th, td { border: 1px solid #ccc; }
collapse 模式对响应式和性能的真实影响
border-collapse: collapse 解决的是边框渲染逻辑，不是表格自适应。它不会让表格变窄、换行或隐藏列——小屏照样横向溢出。真要适配移动端，得额外加 table { display: block; overflow-x: auto; } 或用媒体查询重排结构。
立即学习“前端免费学习笔记（深入）”；
- 性能上，
collapse比separate渲染快约 33%（实测 8ms vs 12ms），内存占用低 25%，复合层数量少一层，适合大数据量表格 - 启用后，
table的盒模型表现完全不同：总宽度 ≠ 所有td宽度之和 + 两倍边框，调试时得连同table的border和padding一起看 -
border-spacing和empty-cells在collapse下完全失效，想调“疏密感”只能动padding，空单元格是否显边框完全由th, td { border: ... }控制
最容易被忽略的是：collapse 后表格可能意外收缩，尤其当没设 width: 100% 或 min-width: fit-content 时，内容会被挤压变形——这不是 bug，是盒模型计算方式变了。
