CSS 单元格间距

在 HTML 中， <table> 元素用于创建表格。 在表格中，单元格之间的间距可以通过 CSS 样式进行设置。

CSS 属性

单元格间距可以使用 border-spacing属性来设置。例如：

table {
  border-spacing: 10px;
}

该属性用于设置单元格边框之间的空隙。默认情况下，其值为 0。该属性仅在使用 border-collapse: separate 属性时才有效。

示例

以下示例演示如何使用此属性为表格设置单元格间距：

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

table {
  border-collapse: separate;
  border-spacing: 10px;
}
td, th {
  padding: 10px;
  border: 1px solid black;
}

该示例将表格边框和单元格边框分离，并设置了单元格间距为 10px。单元格中也设置了内边距和边框样式。

总结

通过 border-spacing 属性，我们可以很容易地为表格设置单元格间距。此属性仅在使用 border-collapse: separate 时才有效。 我们还可以通过设置单元格的边框，内边距等样式来对表格进行更多的样式控制。