应设为collapse以实现边框合并，separate则保持独立边框并受border-spacing影响；collapse适用于网格化数据表格，separate适合需留白的设计场景，但需注意边框统一性与浏览器兼容性差异。
border-collapse设成collapse还是separate？看你要不要“双线”
绝大多数人加了border还看到双线、断线、发虚，根本原因是没动border-collapse——它默认就是separate，每个<td>和<code><th>都独立画边框，左边单元格的右边框 + 右边单元格的左边框 = 看起来像两条线叠着，中间还夹着默认<code>border-spacing: 2px的缝。
想让表格线条干净利落，必须显式设border-collapse: collapse；想保留单元格间留白、加阴影或单侧描边，就得用separate，并配合border-spacing调间距。
用了collapse，border-spacing就彻底失效
border-collapse: collapse不是“建议合并”，是强制合并：相邻边框只取最粗/最显眼的那个，其他直接丢弃；同时border-spacing无论设成0还是10px，浏览器都会无视它。
- 如果你在
collapse模式下写了border-spacing: 0，纯属冗余，删掉更清爽 - 想控制“单元格之间空隙”？别碰
border-spacing，改用padding或margin（注意：只有td/th能生效，tr加margin无效） - 想让整张表外围有留白？给
table本身加margin，别指望border-spacing
想单独给某一行/列加边框？先确认collapse没锁死你
在collapse模式下，给单个<td>加<code>border-top很可能被隔壁单元格的border-bottom覆盖——浏览器会按规则选一条“胜出”，你写的未必生效。
立即学习“前端免费学习笔记（深入）”；
如果必须局部描边：
- 优先切到
border-collapse: separate，再用border精准控制 - 若已用
collapse且不能改（比如全局样式约束），那就统一设整行tr或整列col的边框，别只动一个单元格 - 检查是否被
th或td上更宽的border抢了优先级——collapse模式下边框宽度决定“谁赢”
兼容性和视觉一致性容易被忽略的点
border-collapse在所有现代浏览器里行为一致，但老IE（如IE8）对collapse的支持有细微偏差，比如empty-cells: show可能不响应。不过2026年绝大多数项目已无需兼容这类旧环境。
真正常踩的坑是视觉混乱：
- 混合使用
collapse和separate（比如父表collapse，子表separate）——子表会继承父表的border-collapse吗？不会，它只继承inherit值，否则按自身声明走 - 设了
collapse却没统一border颜色/宽度，结果有的线粗有的细，合并后看起来断断续续 - 用
separate时忘了border-spacing默认是2px，导致表格比预期宽出4px（左右各2px）
collapse不是万能胶，separate也不是原始状态——选哪个，取决于你愿不愿意为“可控性”多写几行CSS，还是为“简洁性”接受全局约束。
