• collapse：相邻单元格的边框会合并为一条边框。
• separate：默认值，每个单元格保持独立边框，可能会出现双线效果。
• inherit：继承父元素的 border-collapse 设置。

要实现边框合并，只需将该属性设置为 collapse。

如何使用border-collapse实现边框合并？

下面是一个简单的示例，展示如何使用 border-collapse: collapse 来消除表格中重复的边框：

青泥学术AI写作辅助平台

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #000;
    padding: 8px;
    text-align: left;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

在这个例子中，由于设置了 border-collapse: collapse，所有单元格之间的边框都会合并，不会出现双线，视觉上更加整洁。

常见问题与注意事项

• 如果不设置 border-collapse: collapse，即使给每个单元格加了边框，也会看到明显的双线分隔，尤其在边框较粗时更明显。
• 当使用 collapse 模式时，border-spacing 属性将失效，因为边框已经合并，无法再设置间距。
• 合并后的边框样式遵循“优先级”规则：比如粗边框会覆盖细边框，实线覆盖虚线等。
• 推荐始终在表格样式中显式设置 border-collapse，避免不同浏览器的默认表现差异。

基本上就这些。只要记住在表格样式中加上 border-collapse: collapse，就能轻松实现边框合并，让表格看起来更专业、紧凑。不复杂但容易忽略。