表格边框不合并的根源是 border-collapse 默认为 separate，解决方法是给 table 设置 border-collapse: collapse 并统一单元格边框样式，同时注意外边框叠加、表头交界处理及兼容性限制。
表格边框不合并，通常是因为浏览器默认将 border-collapse 设为 separate，导致单元格各自绘制边框，出现双线、空隙或粗细不一的问题。解决核心就是显式设置 border-collapse: collapse。
确保 table 元素启用 collapse 模式
仅给 td 或 th 加边框是不够的，必须作用于 table 根元素：
- 添加 CSS：
table { border-collapse: collapse; } - 同时建议设置
border-spacing: 0;（兼容旧写法或 reset 场景） - 若使用了
outline或box-shadow，它们不会被 collapse 影响，需单独处理
统一边框样式与宽度避免视觉断裂
即使启用了 collapse，若相邻单元格边框样式/宽度/颜色不同，仍可能显示异常：
- 推荐统一设置：例如
td, th { border: 1px solid #ccc; } - 注意：上下左右边框会“合并”，最终显示为其中较宽/较深/较靠后的那条（由层叠规则决定）
- 如需强调外边框更粗，可额外给
table设置border，它会叠加在 collapsed 边框之外
处理表头（thead）与表体（tbody）交界处的边框重复
有时 thead th 和 tbody tr:first-child td 的上边框会重叠显示为一条加粗线：
立即学习“前端免费学习笔记（深入）”；
- 解决方案：只保留其中一侧边框，例如设
thead th { border-bottom: none; }，让tbody tr:first-child td { border-top: 1px solid #ccc; } - 或用
border-bottom统一控制分隔线位置，保持逻辑清晰
兼容性与特殊情况提醒
border-collapse: collapse 在所有现代浏览器中支持良好（包括 IE8+），但要注意：
- 响应式表格中，若用
display: block改变 table 行为，border-collapse将失效 - 配合
empty-cells: hide可隐藏空单元格边框（仅对separate有效，collapse下自动忽略空格） - 如果使用 CSS-in-JS 或框架（如 Bootstrap），检查是否被全局样式覆盖，可用
!important临时调试（上线前应优化优先级）
