table-bordered的多個方面闡述

一、基本介紹

在Bootstrap框架中，table-bordered是table表格的一個重要屬性，它可以為table添加邊框。table-bordered會把table的每個單元格和行之間添加1像素的實線邊框，從而讓table更加美觀易讀。除此之外，table-bordered還有其他的特性和應用場景。

二、用法示例

table-bordered是Bootstrap中table的一個屬性，使用CSS樣式表即可輕鬆添加。以下是一段代碼示例：

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

上面的代碼中，使用了table-bordered屬性，並且在table標籤中添加了class="table"，這是Bootstrap table的基礎樣式，使得table能夠具有基礎功能。

三、其他特性

1. 去掉單元格之間的間隔線

有些情況下，我們可能需要去掉單元格之間的間隔線，可以使用以下代碼：

.table-bordered td, .table-bordered th {
  border: none;
}

這樣就可以把所有單元格和表頭的邊框去掉，使得table看起來更加整潔，可讀性也更高。

2. 添加額外的邊框線

有時候，我們需要給table的某些單元格或行添加額外的邊框線，可以使用CSS的border屬性來實現。以下是一段示例代碼：

.table-bordered.extra-border td, .table-bordered.extra-border th {
  border: 2px solid #ccc;
}
.table-bordered.extra-border tr:first-child th {
  border-top: none;
}
.table-bordered.extra-border td:first-child,
.table-bordered.extra-border th:first-child {
  border-left: none;
}
.table-bordered.extra-border td:last-child,
.table-bordered.extra-border th:last-child {
  border-right: none;
}

以上代碼會給table中class="table-bordered extra-border"的單元格和表頭添加2像素的實線邊框，同時保留原有的1像素邊框。其中，tr:first-child和td:first-child/th:first-child是用來去除第一行和第一列的一像素邊框的。

3. 添加自定義顏色的邊框

table-bordered默認使用的顏色是#ddd，可以通過自定義CSS樣式來改變顏色。以下是一段示例代碼：

.table-bordered.custom-border td, .table-bordered.custom-border th {
  border-color: #f0ad4e;
}

以上代碼會把table中class="table-bordered custom-border"的單元格和表頭邊框的顏色改為#f0ad4e，即深黃色。

4. 響應式表格

Bootstrap提供了一種響應式表格的實現方式，使得table能夠根據不同的設備尺寸自適應調節。以下是一段示例代碼：

<div class="table-responsive">
  <table class="table table-bordered">
    ...
  </table>
</div>

以上代碼會把table放入class="table-responsive"的容器中，當設備尺寸小於一定值時，table會自動縮小並出現橫向滾動條，以保證內容的可讀性。