怎么利用HTML的CSS border-collapse: collapse合并表格相邻边框

border-collapse: collapse 必须写在 table 元素上才生效

很多人把 border-collapse: collapse 加到 td、tr 或外层 div 上，结果完全没反应——这是最常见失效原因。该属性是表格级样式，只对 table 元素本身起作用。

实操建议：

直接给 table 标签加内联样式：<table style="border-collapse: collapse">或在 CSS 中明确写：table { border-collapse: collapse; }，不要写成 tr { border-collapse: collapse; }若项目用了 UI 框架（如 Ant Design、Bootstrap），检查是否被其重置样式覆盖，可加 !important 临时验证，但长期应提高选择器权重

合并后边框“消失”或“粗细不一”，其实是边框冲突规则在起作用

border-collapse: collapse 不是简单“叠加变细”，而是让相邻边框按优先级“竞争胜出”：宽度 > 样式（solid > dashed） > 声明顺序（后定义的覆盖先定义的）。所以你看到的边框，未必是你以为那个元素设的。

常见现象与对策：

立即学习“前端免费学习笔记（深入）”；

th 设了 2px solid red，td 是 1px solid #999，但横向线却显示为 1px——因为 td 的上边框和 th 的下边框重叠，而 td 的声明在 CSS 中靠后，且宽度更小，但样式/颜色未占优，最终取了 td 的边框想确保表头线显眼？统一在 th 和 td 上设相同宽度和样式，例如：th, td { border: 1px solid #ccc; }要强制某一边框生效（比如首行底边必须是 2px），直接用单边属性：th:first-child { border-bottom: 2px solid #333; }，并确保它的选择器权重足够

为什么加了 collapse 还有间隙？检查 border-spacing 和 display: block

border-collapse: collapse 和 border-spacing 是互斥开关。只要用了后者，前者就自动降级为 separate；同样，设了 collapse 后，border-spacing 的值会被浏览器静默忽略。

另外，如果给 table 设置了 display: block（比如为了 flex 布局兼容），border-collapse 就会失效——现代浏览器中，该属性仅在 display: table 及其变体（table-cell 等）下有效。

排查步骤：

在开发者工具中检查 table 元素的 computed 样式，确认 border-collapse 确实是 collapse，且没有被其他规则覆盖搜索整个 CSS，删掉所有 border-spacing 相关声明避免对 table 使用 display: block、inline-block 等非表格 display 值；如需控制宽高或居中，改用 width、margin 等属性

要“只有内线、无外框”，不能靠 border-spacing: 0

有人试过 border-collapse: collapse; border-spacing: 0;，结果外框还在——因为 border-spacing 在 collapse 模式下根本无效。真要隐藏外边框，得靠“主动清空”。

做法很直接：

先确保 table 自身无边框：table { border: none; } 或 table { border: 1px solid transparent; }再靠 td 和 th 的边框撑出内线：td, th { border: 1px solid #ddd; }此时首行、末行、首列、末列会多出半条线，用伪类微调：tr:first-child th, tr:first-child td { border-top: none; }、td:last-child, th:last-child { border-right: none; }

这个组合看似多一步，但它是唯一稳定可控的方式。别指望 collapse 自动帮你“智能裁边”——它只管合并，不管显隐。