border-collapse仅对table元素生效，非表格容器无效；collapse合并相邻边框取较大宽度，separate则保持独立边框并支持border-spacing；伪双线多因父级与单元格边框冲突或outline干扰。
table边框重叠时border-collapse失效？先确认是否在table元素上用
很多人把 border-collapse 加到 div 或其他非表格容器上，结果完全没反应——它只对 table 元素及其后代（tr、td、th）生效。
常见错误现象：div 套了 border 后设 border-collapse: collapse，控制台没报错但样式毫无变化。
- 必须作用于
table标签本身，不是父容器 - 如果用 CSS-in-JS 或框架（如 React）动态生成表格，确保最终 DOM 中存在原生
table结构 - 某些 UI 库（如 Ant Design 的
Table）内部用div模拟表格，此时border-collapse天然无效
border-collapse: collapse 和 separate 的实际表现差异
border-collapse: collapse 不是“去掉边框”，而是让相邻边框合并成一条线；而 separate（默认值）会让每个单元格维持独立边框，产生双倍粗细的视觉重叠。
使用场景：需要绘制细线网格（比如数据报表、日历）、避免 1px 边框在高缩放下变模糊时，collapse 是更可控的选择。
立即学习“前端免费学习笔记（深入）”；
-
collapse下，border-width取相邻边框中较大的那个值（例如td设1px，th设2px，交界处显示为2px） -
separate下可配合border-spacing控制单元格间距，但无法消除边框物理重叠 - 注意：IE8+ 支持
collapse，但 IE7 及更早版本仅支持separate
为什么加了border-collapse还是看到双线？检查这些地方
即使正确写在 table 上，仍可能看到“伪双线”——本质是边框叠加或盒模型干扰，不是 border-collapse 失效。
常见错误现象：表格看起来像有 2px 边框，尤其在 th 和 td 交界处。
- 父级
table设了border，同时子级th/td也设了border→collapse会合并它们，但若宽度不同（比如table { border: 1px }+td { border: 2px }），交界处仍显粗 -
th和td的border-style不一致（如一个solid，一个dashed）→ 合并后样式取第一个声明的，可能造成视觉断裂 - 用了
outline或box-shadow模拟边框 → 这些不参与border-collapse计算，会额外叠加
替代方案：不用table也能实现无重叠边框的网格
当结构不是语义化表格（比如卡片列表、响应式网格），硬套 table + border-collapse 反而增加维护成本。
更自然的做法是用 CSS Grid 或 Flexbox 配合负 margin 或 clip-path 控制边界。
- Grid 方案：用
grid-gap留白，所有项目统一设border-bottom和border-right，再用:last-child去掉末尾边框 - Flex 方案：给每个 item 设
margin-right和margin-bottom，再用border单侧绘制，避免交点重叠 - 注意：这些方式需手动处理最后一行/列的边框，
border-collapse的自动合并逻辑在这里不存在
border-collapse 只绑定在 table 上，且依赖相邻单元格边框的协调声明；脱离这个上下文去调它，就像往咖啡里加盐还奇怪怎么不甜。 
