表格边框不合并是因 border-collapse 默认为 separate，需在 table 元素上设置 border-collapse: collapse 并配合 td/th 的 border 定义才能生效，否则无效或无视觉效果。
表格边框不合并，通常是因为默认的 border-collapse 值是 separate（分离），导致单元格各自拥有独立边框，出现双线或空隙。解决方法很简单：显式设置 border-collapse: collapse。
确保正确应用 border-collapse
该属性必须作用于 <table> 元素本身，而不是 <code>tr、td 或 th。且需配合单元格边框定义才能生效。
- 只写
border-collapse: collapse但没给td/th设边框 → 看不到效果 - 写了
border-collapse但加在td上 → 无效（该属性不适用于单元格） - 父容器或重置 CSS 覆盖了样式 → 检查浏览器开发者工具中的计算样式
基础写法示例
以下是最小可用代码：
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模拟表格的元素，同样支持该属性
