HTML中CSS border-collapse合并表格相邻边框的设置方法-html教程-PHP中文网

border-collapse: collapse 必须作用于 table 元素才生效，写在 td、tr 或 div 上无效；其边框合并按宽度、样式、声明顺序三重优先级竞争胜出；失效常见原因包括 border-spacing 冲突、table display 非表格值、外框未设 border。

html中css border-collapse合并表格相邻边框的设置方法

写在 td、tr 或外层 div 上完全无效，浏览器会静默忽略。这是 90% “加了却没反应”问题的根源。

正确做法只有两种：table { border-collapse: collapse; }（推荐），或行内样式 <table style="border-collapse: collapse"> <li>若项目用了 Ant Design、Bootstrap 等 UI 框架，它们常通过重置 CSS 把 <code>table 的 border-collapse 设为 separate，需检查 computed 样式确认是否被覆盖
临时验证可用 table { border-collapse: collapse !important; }，但长期应提高选择器权重（如加类名或用 body .my-table）

border-collapse: collapse 不是简单“取平均”或“叠加变细”，而是让相邻边框按三重优先级“竞选”出一条胜出边框：

宽度最大者胜出（2px > 1px）
样式更实者胜出（solid > dashed > dotted）
声明顺序靠后者胜出（CSS 文件中后写的规则、更高权重的选择器）
例如：th { border-bottom: 2px solid #333; } 和 td { border-top: 1px solid #666; } 同时存在，横向线显示为 2px solid #333；但如果 td 规则写在后面且宽度相同、样式相同，它的颜色就可能覆盖 th 的

常见失效不是属性写错，而是配套缺失或冲突：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

border-spacing 与 collapse 互斥——只要用了前者，后者自动降级为 separate；必须删掉所有 border-spacing 相关声明（包括框架注入的）
给 table 设置了 display: block、inline-block 等非表格 display 值，border-collapse 就会失效；改用 width、margin 控制布局
table 自身没设 border（哪怕 border: 1px solid transparent），会导致外框“消失”，只看到内部双线错觉；同时 th 和 td 的 border 值不统一（比如一个 1px，一个 2px），交界处必然加粗

border-collapse: collapse 下 border-spacing 完全无效，别试 border-collapse: collapse; border-spacing: 0; 这种组合。

真正做法是：保留 collapse，然后用 table { border: none; } 或 table { border: 1px solid transparent; } 隐藏外框
再靠 th, td { border: 1px solid #ccc; } 撑出清晰内线——此时相邻边框自动合并为单线
首列/末列多出半条线？用 th:first-child, td:first-child { border-left: none; } 微调；首行顶边太细？直接给 th:first-child, td:first-child { border-top: 2px solid #333; }，别碰 tr

最常被忽略的一点：合并后，table 的总宽度不再等于所有 td 宽度之和加两倍边框；共享边框只算一次，响应式布局时若按旧逻辑计算，容易错位。