CSS中的border-collapse屬性怎么使用

CSS中的border-collapse屬性怎么使用

在CSS中，border-collapse屬性用于控制表格的邊框是否合并為一個單一的邊框。這個屬性主要應用于<table>元素，并且可以顯著影響表格的外觀和布局。本文將詳細介紹border-collapse屬性的使用方法及其效果。

1. 基本語法

border-collapse屬性有兩個可能的值：

• separate：默認值。表格的邊框是分開的，每個單元格都有自己的邊框。
• collapse：表格的邊框合并為一個單一的邊框，相鄰的單元格共享邊框。

table {
  border-collapse: separate | collapse;
}

2. 使用示例

2.1 默認值：separate

當border-collapse屬性設置為separate時，表格的每個單元格都有自己的邊框，單元格之間的邊框是分開的。這種情況下，可以通過border-spacing屬性來控制單元格之間的間距。

table {
  border-collapse: separate;
  border-spacing: 5px; /* 單元格之間的間距 */
}

td, th {
  border: 1px solid black;
}

在這個例子中，表格的每個單元格都有1像素寬的黑色邊框，并且單元格之間有5像素的間距。

2.2 合并邊框：collapse

當border-collapse屬性設置為collapse時，表格的邊框會合并為一個單一的邊框，相鄰的單元格共享邊框。這種情況下，border-spacing屬性無效。

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid black;
}

在這個例子中，表格的邊框合并為一個單一的邊框，單元格之間沒有間距，邊框看起來更加緊湊。

3. 實際應用

border-collapse屬性在實際應用中非常有用，尤其是在需要創建緊湊的表格布局時。例如，在數據表格中，合并邊框可以使表格看起來更加整齊和專業。

<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
</table>

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

在這個例子中，表格的邊框合并為一個單一的邊框，單元格之間有8像素的內邊距，表頭背景色為淺灰色，整體看起來非常整齊。

4. 總結

border-collapse屬性是控制表格邊框合并的重要工具。通過設置separate或collapse，可以靈活地調整表格的外觀和布局。在實際開發中，根據設計需求選擇合適的值，可以使表格更加美觀和易讀。