必须给table元素显式设置border-collapse: collapse，否则边框永远只是“看起来像合并”，实际是双线、错位、变粗；因为默认separate模式下每个单元格保留独立边框，相邻边框叠加导致视觉异常，而collapse才真正让边框挤成一条线。
必须给 table 元素显式设置 border-collapse: collapse，否则边框永远只是“看起来像合并”，实际是双线、错位、变粗。
为什么只加 border 不行
很多人给 td 和 table 都写了 border: 1px solid #000，但浏览器默认用的是 border-collapse: separate 模式——每个单元格保留自己独立的边框，相邻边框之间还有空隙（哪怕设了 border-spacing: 0），结果就是：上下左右四条边都画了一遍，视觉上边框变粗、有重影、甚至断裂。
- 错误写法：
td { border: 1px solid #000; }+ 没设border-collapse - 现象：两列之间的竖线是 2px 宽，不是 1px；表头和第一行数据之间横线叠在一起
- 根本原因：
border-collapse是作用在table上的布局属性，不是装饰属性，不设它，CSS 边框就按分离模型渲染
正确写法：collapse 必须设在 table 上
border-collapse: collapse 只对 table 元素生效，设在 td 或 th 上完全无效。它让所有相邻边框（包括 table 外边框和单元格内边框）真正“挤成一条线”，而不是视觉叠加。
- 必须写：
table { border-collapse: collapse; } - 推荐配套：
border-spacing: 0（虽然collapse下它被忽略，但留着更清晰） - 边框样式统一写在
table、th、td上，例如：table, th, td { border: 1px solid #ccc; } - 如果只给
table设边框，td不设，那只有外框，内部无分隔线——这不是合并失败，是故意为之
容易踩的坑：auto layout + collapse 的组合问题
当表格内容宽度超出容器，或列宽单位混用（比如 px 和 % 同时出现），即使开了 border-collapse: collapse，边框也可能断裂、错位或漏画——这不是 collapse 失效，而是 table-layout: auto（默认）在动态计算列宽时，把边框渲染逻辑搞乱了。
立即学习“前端免费学习笔记（深入）”；
- 现象：某列突然没边框、横线断开、右侧边框消失
- 解法：强制加
table-layout: fixed，配合明确的列宽（如th:first-child { width: 120px; }） - 注意：
fixed模式下，width优先级高于内容，长文本可能溢出，需额外加word-break: break-word或overflow-wrap: break-word
兼容性和调试建议
所有现代浏览器都支持 border-collapse: collapse，IE8+ 也完全兼容，不用 polyfill。但调试时容易忽略两点：
- 检查 computed styles：确认最终生效的
border-collapse确实是collapse，且来源是table元素，不是继承或覆盖 - 禁用其他干扰属性：比如
outline、box-shadow或第三方 CSS 框架（如 Bootstrap）的表格重置规则，它们可能悄悄重写了border-collapse - 真机测试：iOS Safari 有时对
border-collapse渲染有细微差异，尤其配合transform或zoom时，建议用真实设备验证
边框合并不是“加个属性就完事”的事，它是表格渲染模型切换的关键开关。漏掉它，再精细的 border 样式也只是在错误模型上堆砌；设对了，才能真正控制线条的走向、粗细和连接逻辑。
