border-spacing詳解

一、介紹

border-spacing用於控制表格的行列間距大小。該屬性值可以為0或正數，單位為px、em等。在使用border-collapse屬性時，該屬性才有效。如不使用border-collapse屬性，則border-spacing屬性不會起效。

如果想要設置表格表格的行列間距大小，border-spacing是一個不錯的選擇。讓我們細緻地來了解它。

二、border-spacing屬性

1. 屬性值

border-spacing屬性只有一個值，即表格行列的間距大小。

例如：

table {
  border-spacing: 10px;
}

2. 特點

對於使用border-collapse:collapse 的表格， border-spacing屬性控制的是邊框之間的距離，同時在表格的外部留出間距。而對於使用border-collapse:separate 的表格， border-spacing屬性控制的是單元格之間的距離。

3. 兼容性

border-spacing屬性在IE8及其以下版本的瀏覽器中不被支持。

三、示例

1. 帶有邊框距離的表格

在下面的例子中，表格行列之間存在10px的距離。注意我使用了border-collapse:collapse屬性值。如果不使用該屬性值，則border-spacing屬性不會起作用。

<table style="border-collapse:collapse; border-spacing: 10px;">
  <tr>
    <th>題目</th>
    <th>作者</th>
    <th>發布日期</th>
  </tr>
  <tr>
    <td>JavaScript學習筆記</td>
    <td>Tom</td>
    <td>2020-01-01</td>
  </tr>
  <tr>
    <td>CSS常見問題總結</td>
    <td>Jerry</td>
    <td>2020-02-01</td>
  </tr>
</table>

2. 單元格之間的距離

在下面的例子中，我們有一個表格，該表格使用了border-collapse:separate屬性值。此時，border-spacing屬性控制的是單元格之間的距離。

<table style="border-collapse:separate; border-spacing: 10px;">
  <tr>
    <td>單元格1-1</td>
    <td>單元格1-2</td>
    <td>單元格1-3</td>
  </tr>
  <tr>
    <td>單元格2-1</td>
    <td>單元格2-2</td>
    <td>單元格2-3</td>
  </tr>
  <tr>
    <td>單元格3-1</td>
    <td>單元格3-2</td>
    <td>單元格3-3</td>
  </tr>
</table>

3. 不同表格對border-spacing屬性的影響

在下面的例子中，我們用了兩個表格來展示使用不同border-collapse屬性值時border-spacing屬性的影響。

<table style="border-collapse:collapse; border-spacing: 30px;">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

<table style="border-collapse:separate; border-spacing: 30px;">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

四、總結

border-spacing是控制表格行列間距大小的一種屬性，只在使用了border-collapse屬性時起作用。它的值可以為0或正數，單位可以是px、em等。當使用border-collapse:collapse時，border-spacing屬性控制的是邊框之間的距離，同時在表格的外部留出間距。當使用border-collapse:separate時，border-spacing屬性控制的是單元格之間的距離。