CSS border-collapse 属性

border-collapse 属性用于指定表格边框的合并方式。默认情况下，表格边框会相互重叠，使用 border-collapse 属性可以控制表格边框的合并方式。

属性值

• separate：默认值，表格边框不会合并，相互重叠。
• collapse：表格边框会合并，相邻单元格的边框会合并成一个边框。

使用方法

table {
  border-collapse: collapse;
}

示例代码

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border Collapse Example</title>
  <style>
    table {
      border-collapse: collapse;
    }
    td, th {
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </table>
</body>
</html>

在上面的示例代码中，我们使用 border-collapse: collapse; 将表格边框合并，使得相邻单元格的边框会合并成一个边框，从而创建出更加整洁的表格外观。

这就是 border-collapse 属性的用法和效果。