CSS border-collapse属性实例讲解

border-collapse属性用于控制表格的边框是否合并。

当border-collapse的值为collapse时，相邻单元格的边框会合并为一个单一的边框，表格看起来更加紧凑。而当border-collapse的值为separate时，相邻单元格的边框保持分开，表格看起来更加明显。

下面是一个使用border-collapse属性的简单示例：

HTML代码：

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

CSS代码：

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 10px;
}

在上面的示例中，我们将表格的border-collapse属性设置为collapse，使相邻单元格的边框合并为一个单一的边框。然后，我们为每个单元格设置了1像素的黑色边框和10像素的内边距。

运行示例后，我们将会看到表格的边框被合并为一个单一的边框，表格看起来更加紧凑。