表格边框合并（border-collapse）是 CSS 中一个看似简单却容易出错的属性，尤其在实战开发中，不少开发者都曾因表格边框显示异常而困扰。最常见的情况是：明明在样式表中设置了 border-collapse: collapse，最终呈现的表格却依然是双线边框。要彻底弄懂这一问题，需要牢记一条核心原则——border-collapse 必须作用于 table 元素本身，若将其写在 td、tr 或其他标签上，浏览器会直接忽略该声明。这正是许多人遭遇“写了却无效”的关键所在。
为何设置了 border-collapse: collapse 依然出现双线边框？
浏览器默认采用 border-collapse: separate 模式，每个 td 和 th 会独立绘制自身边框，加上默认的 border-spacing: 2px，视觉效果自然变成了两条边框中间夹着空隙。常见的翻车场景包括：
- 将
border-collapse: collapse误写在td或tr上——浏览器会直接无视该规则； - 使用了传统的
border="1"属性，却未配合 CSS 合并逻辑； - 被 UI 框架（如 Bootstrap）或
normalize.css默认设为separate，但未主动覆盖； - 页面缺少
!DOCTYPE声明，触发怪异模式，导致属性行为变得不可预测。
正确设置表格边框合并，三步缺一不可
那么正确的实现方式是什么？遵循以下三个步骤，每一步都至关重要：
table { border-collapse: collapse; }—— 合并所有相邻边框，同时使border-spacing失效；table { border: 1px solid #333; }—— 定义外边框样式（虽非必需，但建议显式指定，以避免不可控的默认值）；th, td { border: 1px solid #333; }—— 设置内边框样式。需注意，内外边框的粗细必须保持一致，否则交汇处会出现加粗效果。例如，th设为2px而td设为1px，合并后的边框将采用2px。
边框合并后究竟采用哪一条？
边框合并并非简单叠加，也不是取平均值，而是按照优先级规则“优胜劣汰”。这一机制类似于擂台赛：
- 宽度较大的胜出（
2px优先于1px）； - 宽度相同时，样式更实者胜出（
solid优先于dashed，dashed优先于dotted）； - 宽度与样式均一致时，CSS 中后定义的规则胜出（需关注源码顺序与选择器权重）；
border: none不参与竞争，会被其他方向的边框“穿透”显示。例如，若希望某个单元格仅显示顶部边框，应写成td { border: none; border-top: 1px solid #000; }。
表格仍有缝隙？别急着查 border-spacing，先检查 padding
许多开发者遇到缝隙时，第一反应是排查 border-spacing，但在 border-collapse: collapse 模式下，该属性已经失效。缝隙的真正元凶通常是 th 或 td 的 padding 撑开了内部间距：
- 统一清零：
th, td { padding: 0; }； - 需要留白时，应通过
padding控制，例如th, td { padding: 8px 12px; }； - 切勿给
table设置display: block或inline-block——这会导致border-collapse失效（该属性仅在display: table及其衍生值下生效）。
一个容易被忽视的细节是：启用 border-collapse: collapse 后，表格的盒模型会发生变化——内部边框不再各自占据空间，table 的总宽度不再等于所有 td 宽度之和加上两倍边框。调整样式时，需要将 table 的 border、padding 与 width 综合考量，才能获得预期的布局效果。
