CSS Border Spacing

一、介绍

border-spacing属性是CSS3中的一种用来控制表格边框间距的属性。在CSS2中，间距的控制需通过边框合并（border-collapse）属性，此外还需使用外边距（margin）属性。

与边框合并相比，border-spacing属性更加灵活方便。它可以单独设置每个单元格的边框间距而不必考虑表格整体的边框样式。

二、基础使用

使用border-spacing属性需要设置表格的border-collapse属性值为separate，否则设置border-spacing无效。

下面是一个基本的表格示例：

<table style="border-collapse: separate; border-spacing: 10px;">
  <tr>
    <th>头1</th>
    <th>头2</th>
  </tr>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
</table>

结果如下图所示：

头1	头2
行1列1	行1列2
行2列1	行2列2

这里我们设置border-spacing: 10px，就相当于单元格和单元格之间的间距为10px。

三、进阶使用

1. 指定水平和垂直间距

除了设置一个值指定单元格之间的间距之外，还可以分别指定水平和垂直方向的间距：

<table style="border-collapse: separate; border-spacing: 10px 20px;">
  <tr>
    <th>头1</th>
    <th>头2</th>
  </tr>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
</table>

效果如下：

头1	头2
行1列1	行1列2
行2列1	行2列2

2. 单元格之间的边框样式

在border-spacing属性的控制下，单元格的边框样式可以比较容易地实现改变，就像下面这个示例：

<table style="border-collapse: separate; border-spacing: 10px;">
  <tr>
    <td style="border: 1px solid #ccc;">单元格1</td>
    <td style="border-left: none; border-top: none; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;">单元格2</td>
    <td style="border: 1px solid #ccc;">单元格3</td>
  </tr>
  <tr>
    <td style="border-left: none; border-top: none; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;">单元格4</td>
    <td style="border: 1px solid #ccc;">单元格5</td>
    <td style="border-left: 1px solid #ccc; border-top: none; border-right: none; border-bottom: 1px solid #ccc;">单元格6</td>
  </tr>
  <tr>
    <td style="border: 1px solid #ccc;">单元格7</td>
    <td style="border-left: none; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: none;">单元格8</td>
    <td style="border: 1px solid #ccc;">单元格9</td>
  </tr>
</table>

效果如下：