17370845950

表格边框不合并的根源是 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 临时调试（上线前应优化优先级）