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>

結果如下圖所示：

這裡我們設置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>

效果如下：

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>

效果如下：

四、注意事項

雖然border-spacing屬性可以方便地控制單元格之間的間距，但是它並不支持小數值。也就是說，如果設置了非整數的值，它會被取整到最接近的整數。

此外，border-spacing屬性只適用於使用border-collapse: separate屬性的表格，如果你使用的是border-collapse: collapse屬性，你可以通過設置單元格的padding屬性來控制單元格之間的距離。

五、總結

本文介紹了border-spacing屬性的基本用法，包括如何使用、如何指定間距、如何設置單元格的邊框樣式等等。通過掌握和應用這些知識，你可以更好地控制表格的邊框樣式和間距。