表格边框不合并是因 border-collapse 默认为 separate,需在 table 元素上设置 border-collapse: collapse 并配合 td/th 的 border 定义才能生效,否则无效或无视觉效果。

表格边框不合并,通常是因为默认的 border-collapse 值是 separate(分离),导致单元格各自拥有独立边框,出现双线或空隙。解决方法很简单:显式设置 border-collapse: collapse。
确保正确应用 border-collapse
该属性必须作用于 以下是最小可用代码: 这样相邻单元格的边框会自动合并为一条线,不再重复渲染。 立即学习“前端免费学习笔记(深入)”; 有时 元素本身,而不是
tr、td 或 th。且需配合单元格边框定义才能生效。
border-collapse: collapse 但没给 td/th 设边框 → 看不到效果border-collapse 但加在 td 上 → 无效(该属性不适用于单元格)基础写法示例
table {
border-collapse: collapse;
}
table td,
table th {
border: 1px solid #000;
padding: 8px;
}
处理表头与边框粗细不一致
th 和 td 边框宽度不同,或表头用了 border-bottom 单边,会导致合并后线条粗细异常。建议统一控制:
border 定义(如都用 1px solid #ccc)th:first-child、th:last-child 单独调整,但需测试合并逻辑是否仍清晰兼容性与特殊情况
border-collapse: collapse 在所有现代浏览器中完全支持,包括 IE8+。但注意:
border-spacing(仅在 separate 模式下生效)时,设为 collapse 后该属性会被忽略border-collapse,外层设置不影响内层display: table 模拟表格的元素,同样支持该属性










