bordercollapse 是什么？CSS 表格边框合并的用法与示例

在 CSS 中，常有人把 border-collapse 写成“bordercollapse”，但后者不是有效的 CSS 属性。border-collapse 用来设置 HTML 表格的边框采用“合并”还是“分离”模式。它最常见的用途，是让相邻单元格共用一条边框，避免表格看起来像由一格格独立的小盒子拼成。

本文会说明该属性的语法、两种模式的差异、合并边框的冲突处理规则，以及适用场景和常见错误。示例可以保存为 .html 文件后直接在浏览器中打开。

一、border-collapse 是什么

border-collapse 是 CSS 表格布局相关属性，用于指定表格边框是合并绘制，还是彼此分离。它应当设置在表格元素上，例如 <table>，而不是用来代替单元格的 border 属性。

最基本的写法如下：

table {
  border-collapse: collapse;
}

border-collapse 只接受两个关键字：collapse 和 separate。它没有数值参数，不接受长度、百分比、颜色或逗号分隔的选项。属性名必须包含连字符，写成 bordercollapse 不会生效。

二、两个取值的区别

1. collapse：合并边框

使用 collapse 时，相邻单元格的边框会参与同一条网格线的绘制。两格之间不会简单地画出两条并排的边框；浏览器会按照边框冲突规则确定该位置最终显示哪条边框。

这通常适合数据表、成绩表、库存清单等需要连续网格线的内容。

2. separate：分离边框

separate 表示单元格边框各自绘制，单元格之间可以留出间距。它也是 border-collapse 的初始值：如果没有设置该属性，通常就是分离模式。

分离模式下，border-spacing 可以控制相邻单元格边框之间的距离。例如：

table {
  border-collapse: separate;
  border-spacing: 8px 4px;
}

两个长度依次表示水平方向和垂直方向的间距；只写一个长度时，两个方向使用相同间距。这里的间距不是单元格的内边距：单元格内容与自身边框之间的距离仍由 padding 控制。

当表格使用 border-collapse: collapse 时，border-spacing 不参与合并边框的布局，应当改用单元格的 padding 调整内容留白。

三、可运行示例：合并与分离对比

下面的完整示例创建两张结构相同的表格。保存为 table-borders.html 后即可查看效果：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>表格边框模式对比</title>
  <style>
    body {
      font-family: sans-serif;
      line-height: 1.6;
      padding: 24px;
    }

    table {
      width: 100%;
      margin: 12px 0 28px;
      background: #fff;
    }

    th,
    td {
      border: 1px solid #667085;
      padding: 10px 14px;
      text-align: left;
    }

    .collapsed {
      border-collapse: collapse;
    }

    .separated {
      border-collapse: separate;
      border-spacing: 8px 4px;
    }

    th {
      background: #eef2ff;
    }
  </style>
</head>
<body>
  <h2>合并边框</h2>
  <table class="collapsed">
    <thead>
      <tr><th>项目</th><th>数量</th></tr>
    </thead>
    <tbody>
      <tr><td>键盘</td><td>12</td></tr>
      <tr><td>鼠标</td><td>8</td></tr>
    </tbody>
  </table>

  <h2>分离边框</h2>
  <table class="separated">
    <thead>
      <tr><th>项目</th><th>数量</th></tr>
    </thead>
    <tbody>
      <tr><td>键盘</td><td>12</td></tr>
      <tr><td>鼠标</td><td>8</td></tr>
    </tbody>
  </table>
</body>
</html>

第一张表的相邻单元格共享网格线；第二张表则保留单元格之间的空隙。两种模式都可以设置单元格边框和内边距，区别在于边框如何参与表格布局与绘制。

四、合并模式下，边框冲突如何处理

合并模式不是把相邻两条边框叠在一起，也不应理解为“左右两格的边框都会完整显示”。网格线位置可能同时有表格、行、列、行组、列组或单元格等元素提供边框声明，浏览器需要选出一条最终用于绘制的边框。

理解以下规则，能解释许多“为什么这个边框颜色没有显示”的情况：

1. hidden 优先：如果冲突边框中有 hidden，该网格线不绘制边框。
2. none 最弱：none 不提供可见边框；只要有其他有效边框参与竞争，通常由其他边框胜出。若所有候选边框都是 none，则不绘制边框。
3. 先比较宽度：在其他条件相同的情况下，较宽的边框优先。宽度按 CSS 长度计算，而不是由声明顺序决定。
4. 再比较边框样式：宽度相同时，样式有优先级。CSS 表格边框冲突规则中的顺序为：double、solid、dashed、dotted、ridge、outset、groove、inset。hidden 和 none 按前述规则处理。
5. 再考虑来源：如果宽度和样式仍相同，单元格边框优先于行边框，行边框优先于行组边框，行组边框优先于列边框，列边框优先于列组边框，列组边框优先于表格边框。
6. 最后才比较颜色等细节：颜色不会因为更亮、更暗或更醒目而自动获胜。若候选边框的关键特征相同，最终结果还会依据冲突规则处理；不应依赖相同优先级边框的声明顺序来实现配色。

因此，若某个单元格同时声明了较宽边框，可能会覆盖从行或列元素继承到该网格线位置的较细边框。反过来，即使在 <tr> 上设置了明显边框，也不一定能盖过参与冲突的单元格边框。

用示例观察单元格边框优先级

以下示例中，两格之间的网格线会受到左右单元格声明的影响。中间边框最终由冲突规则决定，而不是简单地把两条边框相加：

<style>
  .conflict-table {
    border-collapse: collapse;
  }

  .conflict-table th,
  .conflict-table td {
    border: 2px solid #64748b;
    padding: 12px;
  }

  .conflict-table td:first-child {
    border-right: 4px solid #dc2626;
  }

  .conflict-table td:last-child {
    border-left: 1px dashed #2563eb;
  }
</style>

<table class="conflict-table">
  <tbody>
    <tr>
      <td>左侧单元格</td>
      <td>右侧单元格</td>
    </tr>
  </tbody>
</table>

这个例子适合用来观察合并边框，不适合作为“颜色声明顺序决定输赢”的范例：边框的宽度、样式和来源都会影响结果。实际项目中，若相邻单元格需要明显不同的分隔线，最好明确规划表格的边框策略，并在目标浏览器中检查效果。

五、哪些场景适合使用 border-collapse

1. 普通数据表

当表格的主要任务是呈现行列关系时，使用合并边框通常更直接。每条网格线只显示一条，CSS 也不必为相邻两格的边框重叠效果作额外补偿。

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  border: 1px solid #cbd5e1;
  padding: 8px 12px;
}

2. 报表与打印表格

合并边框能让连续网格线保持清晰，适合报表、发票明细或打印视图。打印效果还会受到浏览器、打印机和打印设置影响，因此重要文档应实际预览或打印验证。

3. 需要单元格间距的展示型表格

如果设计希望单元格像独立卡片一样分开，可以选择 border-collapse: separate，再用 border-spacing 控制间隔。需要特别注意：表格与单元格背景、圆角以及边框之间的视觉关系，和合并模式并不完全相同。

4. 不应用它替代布局工具

border-collapse 服务于表格边框模型，不是 Flexbox 或 Grid 的间距属性，也不适用于让普通块级元素的边框合并。对于卡片列表或页面布局，不要把内容改造成表格结构，只为了利用边框合并；应根据内容语义选择布局方式。

六、常见错误与排查方法

错误一：属性名写错

table {
  bordercollapse: collapse;
}

上面的声明无效，因为正确名称是 border-collapse。CSS 对属性名的拼写要求严格；浏览器会忽略不认识的声明，而不是自动补上连字符。

错误二：只给 table 写边框，没有给单元格写边框

border-collapse 决定的是边框模型，不会自动为每个单元格创建网格线。如果想画单元格网格，通常还需要给 th、td 设置 border。

table {
  border-collapse: collapse;
  border: 1px solid #334155;
}

th,
td {
  border: 1px solid #cbd5e1;
}

错误三：在 collapse 模式中使用 border-spacing

这类代码不会产生预期的单元格间隔：

table {
  border-collapse: collapse;
  border-spacing: 10px;
}

想让单元格之间留空，应改成 separate；如果只是想让文字离边框远一点，则保留 collapse，并增加单元格的 padding。

错误四：用 margin 给单元格制造间距

表格单元格的布局不是普通块盒模型的简单复制，给 td 设置外边距通常不是实现单元格间距的可靠方式。分离模式请使用 border-spacing；内容留白请使用 padding。

错误五：以为 border-collapse 会清除所有双线

collapse 会让相邻边框在网格线上按规则竞争，但不会移除所有边框。若某条边仍然可见，应检查它是否来自相邻单元格、表格外框或表头，而不是只在一个元素上反复添加 border: none。

错误六：使用 border-radius 后期待每个单元格都独立圆角

合并边框模式会把边框作为表格网格的一部分处理，因此单元格各自的圆角效果可能不符合预期，尤其是内部网格线处。若设计要求单元格彼此分离并带独立圆角，可考虑分离模式，并在不同浏览器中验证；不要假设改变 border-collapse 就能保证所有圆角效果一致。

错误七：忽略表格元素的实际边框来源

HTML 表格可以包含 thead、tbody、tr、th、td 等不同层次。边框可能定义在其中任何一层。排查时可以在浏览器开发者工具中检查计算后的样式，确认具体是哪条规则生效，而不是只看表格本身的 CSS。

七、关键边界：继承、布局与浏览器行为

border-collapse 的初始值是 separate，它不是一个会自动应用到文档所有表格的全局重置。可以在样式表中为目标表格统一设置，但应避免把选择器写得过于宽泛，以免意外影响页面中其他用途的表格。

该属性适用于表格和行内表格等表格格式上下文中的表格元素。普通的 div 或 span 不会因为设置了 border-collapse 就获得表格边框合并效果。它也不是用于控制整个表格网格宽度、列宽或单元格内容对齐的属性；这些应分别由表格布局、宽度、对齐和内边距等 CSS 规则处理。

在合并模式中，边框位于相邻表格单元格共享的网格线上。某一条线最后呈现的宽度与颜色，不一定等同于任意一格单独声明的值。设计时如果要求特定的分隔线，应检查冲突双方及其来源，必要时简化重复声明。

响应式表格还需单独处理内容过宽问题。border-collapse 不会自动让表格适应窄屏，也不会替单元格内容换行。可以根据页面需求调整列宽、允许文本换行，或给表格外层添加横向滚动容器；这些是布局问题，与边框是否合并无关。

八、参数限制与安全说明

从 CSS 语法看，border-collapse 只有 collapse 和 separate 两个有效取值。它不接受诸如 collapse(2px) 这样的函数，也没有可调节“合并强度”的参数。需要调整线条粗细时应设置 border-width；需要设置颜色和线型时分别使用 border-color、border-style 或组合属性 border。

它本身不是安全控制措施，也不会过滤、隐藏或加密单元格内容。边框是否可见不能用来保护敏感数据：隐藏的文字仍可能存在于页面 DOM、辅助技术读取结果或开发者工具中。若数据不应向用户提供，应在服务端或应用逻辑中控制数据是否输出和是否授权访问，而不是依赖 CSS 隐藏。

同样，border-collapse 不负责阻止跨站脚本、点击劫持或其他安全问题。它是纯粹的呈现属性，选择 collapse 或 separate 不会改变 HTML 内容的可信度。需要安全防护时，应根据具体风险使用正确的输入处理、输出编码、授权检查和浏览器安全策略。

九、实践建议：按需求选模式

• 希望表格是连续、紧凑的网格：选择 border-collapse: collapse。
• 希望单元格之间有空白：选择 border-collapse: separate，并设置 border-spacing。
• 希望文字与单元格边框之间更宽松：调整 td、th 的 padding，不要混淆它与单元格间距。
• 边框颜色或粗细不符合预期：检查相邻元素的边框，以及合并模式下的宽度、样式和来源冲突。
• 需要不同设备或打印环境下表现稳定：在目标浏览器中测试实际表格，尤其检查窄屏、长内容和圆角效果。

总结

border-collapse 控制的是表格边框的组织方式，而不是边框本身的颜色、宽度或表格布局。collapse 让相邻边框共享网格线，适合常见数据表；separate 保留单元格间距，并可配合 border-spacing 使用。理解合并模式下边框会发生冲突，记住 border-spacing 只适用于分离模式，就能避免大多数常见问题。