border-collapse应设为collapse以实现边框合并，separate则保持独立边框并受border-spacing影响；collapse适用于网格化数据表格，separate适合需留白的设计场景，但需注意边框统一性与浏览器兼容性差异。
border-collapse属性到底该设成collapse还是separate
border-collapse 只有两个合法值：collapse 和 separate。设成 collapse 时，相邻单元格共用边框，总边框宽度就是单条边框的宽度；设成 separate（默认值）时，每个单元格自带独立边框，还会受 border-spacing 控制间距。
-
collapse更适合传统“网格感”强的表格，比如后台数据列表、报表，视觉干净、无冗余线条 -
separate适合需要留白、阴影或单元格独立样式的设计场景，但容易因border-spacing为 0 却没意识到它还在起作用而出现意外缝隙 - 注意：一旦设为
collapse，border-spacing直接失效，连设了也无效
示例对比：
table { border-collapse: collapse; border: 1px solid #ccc; }
td { border: 1px solid #999; } —— 此时所有内部边框自动合并，不会出现双线重叠
为什么加了border-collapse: collapse还是有双线或空隙
常见错误不是属性写错了，而是边框本身叠加导致的视觉错觉：
表格自身有
border，每个td也有border，collapse后它们会“选中”一个来渲染，但颜色/宽度不一致时，浏览器按规则取“较宽者”或“较深色者”，造成粗细突变-
th和td边框设置不统一，比如th是2px solid，td是1px solid，合并后顶部行看起来更粗立即学习“前端免费学习笔记（深入）”；
父容器或表格设置了
outline、box-shadow，被误认为是边框异常统一所有参与合并的边框：给
table、th、td设相同border样式（至少同宽同色）避免只给
td加边框而漏掉th或table检查是否意外继承了外部 CSS 框架（如 Bootstrap）对
table的重置规则
border-collapse在不同浏览器里表现一致吗
现代浏览器（Chrome 80+、Firefox 75+、Safari 14+、Edge 88+）对 border-collapse 的实现基本一致，但仍有两个真实存在的兼容性细节：
IE8–IE11 对
border-collapse: collapse下的empty-cells: hide支持不稳定，空单元格可能仍占位Safari 在某些 zoom 缩放级别下，
1px边框合并后可能出现 0.5px 模糊或断线（非 bug，是 subpixel 渲染结果）如果要兼容老 IE，别依赖
empty-cells: hide，改用 JS 清空或visibility: hidden对高保真表格（如财务报表），避免纯
1px+collapse组合，可升到2px或加background-clip: padding-box减少模糊感
和CSS Grid或Flex相比，border-collapse还有必要用吗
border-collapse 是表格专属属性，只对 display: table 系列生效。如果你用的是 div + display: grid 模拟表格布局：
border-collapse完全无效，Grid 用gap控制间距，边框靠单元格自己控制试图在 Grid 里“复刻” collapse 效果，得手动处理相邻元素的边框隐藏（比如用
:not(:last-child)去掉右/下边框），维护成本高真实表格语义（含
thead/tbody/caption）必须用原生table，这时border-collapse不是可选项，是正确渲染的前提纯展示布局且需复杂响应式？优先 Grid/Flex；需要排序、筛选、屏幕阅读器支持？表格结构 +
border-collapse仍是更稳妥的选择
表格边框合并看着简单，实际卡点都在边框来源是否统一、是否混用了语义表格和模拟表格、以及有没有人在意 Safari 下那个若隐若现的 1px 断线。
