在 GitHub 上檢視

表格

使用 Bootstrap 為表格設定選擇性樣式（由於 JavaScript 外掛程式普遍使用表格）的文件和範例。

範例

由於第三方小工具（例如行事曆和日期選擇器）廣泛使用表格，我們設計表格為選擇性。只要將基本類別 .table 加入任何 <table>，然後使用自訂樣式或我們包含的各種修改器類別進行延伸。

使用最基本的表格標記，以下是 .table 為基礎的表格在 Bootstrap 中的樣貌。Bootstrap 4 中繼承所有表格樣式，表示任何巢狀表格的樣式都會與父表格相同。

# 第一個 最後一個 控制項
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

您也可以使用 .table-dark 將顏色反轉，在深色背景上顯示淺色文字。

# 第一個 最後一個 控制項
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

表格標頭選項

與表格和深色表格類似，使用修改器類別 .thead-light 或 .thead-dark 可讓 <thead> 顯示為淺灰色或深灰色。

# 第一個 最後一個 控制項
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# 第一個 最後一個 控制項
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

條紋列

使用 .table-striped 可為 <tbody> 中的任何表格列新增斑馬線條。

# 第一個 最後一個 控制項
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# 第一個 最後一個 控制項
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

有邊框表格

新增 .table-bordered 可為表格和儲存格的所有側邊新增邊框。

# 第一個 最後一個 控制項
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# 第一個 最後一個 控制項
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

無邊框表格

新增 .table-borderless 可為沒有邊框的表格。

# 第一個 最後一個 控制項
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

.table-borderless 也可以用於深色表格。

# 第一個 最後一個 控制項
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-borderless table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

可滑鼠移動物件

新增 .table-hover 可為 <tbody> 中的表格列啟用滑鼠移入狀態。

# 第一個 最後一個 控制項
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# 第一個 最後一個 控制項
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

小表格

新增 .table-sm 可將儲存格內距減半，讓表格更為緊湊。

# 第一個 最後一個 控制項
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# 第一個 最後一個 控制項
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

情境類別

使用情境式類別可為表格列或個別儲存格著色。

類別 標題 標題
已啟用 儲存格 儲存格
預設 儲存格 儲存格
主要 儲存格 儲存格
次要 儲存格 儲存格
成功 儲存格 儲存格
危險 儲存格 儲存格
警告 儲存格 儲存格
資訊 儲存格 儲存格
淺色 儲存格 儲存格
深色 儲存格 儲存格 
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

深色表格不提供一般表格背景變異，不過，您可以使用 文字或背景公用程式 來達成類似的樣式。

# 標題 標題
1 儲存格 儲存格
2 儲存格 儲存格
3 儲存格 儲存格
4 儲存格 儲存格
5 儲存格 儲存格
6 儲存格 儲存格
7 儲存格 儲存格
8 儲存格 儲存格
9 儲存格 儲存格 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
傳達輔助技術的意義

僅使用顏色來新增意義只會提供視覺指示，這不會傳達給輔助技術的使用者，例如螢幕閱讀器。請確保由顏色表示的資訊從內容本身（例如可見文字）中很明顯，或透過其他方式包含，例如使用 .sr-only 類別隱藏的額外文字。

透過將任何 .table 包裝在 .table-responsive{-sm|-md|-lg|-xl} 中來建立回應式表格，讓表格在每個 max-width 斷點（分別為 576px、768px、992px 和 1120px，但不包含）水平捲動。

請注意，由於瀏覽器目前不支援 範圍內容查詢，我們會使用 min- 和 max- 前綴 和視窗寬度為分數（例如，在高解析度裝置的特定條件下可能會發生）的限制，使用較高精度的值來進行這些比較。

標題

<caption> 的功能就像表格的標題。它可以協助使用螢幕閱讀器的使用者找到表格、了解表格的內容，並決定是否要閱讀表格。

使用者清單
# 第一個 最後一個 控制項
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

回應式表格

回應式表格讓表格可以輕鬆地水平捲動。只要將 .table 用 .table-responsive 包起來，就可以讓任何表格在所有視窗中都能回應。或者，使用 .table-responsive{-sm|-md|-lg|-xl} 選擇一個最大斷點，讓回應式表格最多可以延伸到該斷點。

垂直剪裁/截斷

回應式表格使用 overflow-y: hidden，這會剪掉超出表格底部或頂部邊緣的任何內容。特別是，這可能會剪掉下拉式選單和其他第三方小工具。

始終回應

在每個斷點上，使用 .table-responsive 來讓表格水平捲動。

# 標題 標題 標題 標題 標題 標題 標題 標題 標題
1 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格
2 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格
3 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

特定中斷點

視需要使用 .table-responsive{-sm|-md|-lg|-xl} 來建立最多可以延伸到特定斷點的回應式表格。從該斷點開始，表格會正常顯示，不會水平捲動。

這些表格可能會顯示為損壞，直到其回應式樣式套用在特定視窗寬度上。

# 標題 標題 標題 標題 標題 標題 標題 標題
1 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格
2 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格
3 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格
# 標題 標題 標題 標題 標題 標題 標題 標題
1 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格
2 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格
3 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格
# 標題 標題 標題 標題 標題 標題 標題 標題
1 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格
2 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格
3 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格
# 標題 標題 標題 標題 標題 標題 標題 標題
1 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格
2 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格
3 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 儲存格 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

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

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

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