border-collapse必须写在table元素上才生效，写在td、tr或div上无效；常见失效原因包括框架重置为separate、border-spacing冲突、display非table值或table无边框；合并后边框按宽度>样式>声明顺序优先级竞争。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

border-collapse必须写在

上才生效

它只对 table 元素起作用，写在 td、tr 或外层 div 上，浏览器直接忽略。常见失效场景是：用 Ant Design 或 Bootstrap 时，框架 CSS 把 table 的 border-collapse 重置为 separate —— 务必打开开发者工具，检查 computed 样式确认是否被覆盖。

正确写法只有两种：

• table { border-collapse: collapse; }（推荐，语义清晰、可复用）
• <table style="border-collapse: collapse">（临时调试可用）

为什么加了collapse还是双线或有白缝

不是属性没生效，而是三个配套条件没满足：

• border-spacing 和 collapse 互斥：只要 CSS 里存在任何 border-spacing 声明（包括框架注入的），collapse 就自动失效；必须全局删掉
• table 被设了 display: block 或 inline-block，会彻底禁用 border-collapse；应改用 width、margin 控制布局
• table 自身没设 border（哪怕 border: 1px solid transparent），会导致外框“消失”，只看到内部交界处加粗，误以为是双线

合并后边框粗细/颜色不对？其实是边框竞争规则在起作用

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 的。

要“只有内线、无外框”，别碰border-spacing

border-collapse: collapse 下 border-spacing 完全无效，border-collapse: collapse; border-spacing: 0; 这种组合纯属多余。

真正做法是：

• 保留 table { border-collapse: collapse; }
• 用 table { border: none; } 或 table { border: 1px solid transparent; } 隐藏外框
• 再靠 th, td { border: 1px solid #ccc; } 撑出内线——此时相邻边框自动合并为单线

容易被忽略的是：如果 th 设了 2px 而 td 是 1px，交界处必然变成 2px，视觉断裂明显；统一宽度和样式才是稳定输出的关键。