跳至主要內容 跳至文件導覽
在 GitHub 上檢視

表格

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

在此頁面上

概觀

由於 <table> 元素在日曆和日期選擇器等第三方小工具中廣泛使用，Bootstrap 的表格是選擇性的。將基本類別 .table 新增到任何 <table>，然後使用我們的選用修改器類別或自訂樣式進行延伸。所有表格樣式在 Bootstrap 中都不會繼承，表示任何巢狀表格都可以獨立於父表格進行樣式設定。

使用最基本的表格標記，以下是 Bootstrap 中基於 .table 的表格的外觀。

# 第一個 最後一個 處理
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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

變體

使用背景色類別為表格、表格列或個別儲存格上色。

注意！由於產生我們的表格變體所使用的 CSS 較為複雜，因此在 v6 之前，它們很可能不會看到色彩模式自適應樣式。
類別 標題 標題
預設 儲存格 儲存格
主要 儲存格 儲存格
次要 儲存格 儲存格
成功 儲存格 儲存格
危險 儲存格 儲存格
警告 儲存格 儲存格
資訊 儲存格 儲存格
淺色 儲存格 儲存格
深色 儲存格 儲存格 
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>
無障礙提示：僅使用色彩來傳達意義只能提供視覺指示，而無法傳達給螢幕閱讀器等輔助技術的使用者。請確保意義從內容本身就很明顯（例如，具有 足夠 色彩對比 的可見文字），或透過其他方式包含，例如使用 .visually-hidden 類別隱藏的其他文字。

強調表格

條紋列

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

# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped">
  ...
</table>

條紋欄

使用 .table-striped-columns 為任何表格欄新增斑馬條紋。

# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped-columns">
  ...
</table>

這些類別也可以新增到表格變體

# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-dark table-striped">
  ...
</table>
# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-dark table-striped-columns">
  ...
</table>
# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-success table-striped">
  ...
</table>
# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-success table-striped-columns">
  ...
</table>

可懸停列

在 <tbody> 內的表格列中加入 .table-hover 以啟用懸停狀態。

# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-hover">
  ...
</table>
# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-dark table-hover">
  ...
</table>

這些可懸停列也可以與條紋列變體結合使用

# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped table-hover">
  ...
</table>

活動表格

透過加入 .table-active 類別來突顯表格列或儲存格。

# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">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-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

變體和加重表格如何運作？

對於加重表格（條紋列、條紋欄、可懸停列 和 活動表格），我們使用一些技術讓這些效果適用於我們所有的 表格變體

  • 我們從設定表格儲存格背景開始，使用 --bs-table-bg 自訂屬性。然後所有表格變體設定該自訂屬性來為表格儲存格著色。這樣一來，如果使用半透明顏色作為表格背景，我們就不會遇到問題。
  • 然後我們在表格儲存格上加入內嵌方框陰影，使用 box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); 來疊加在任何指定的 background-color 上。它使用自訂串聯來覆寫 box-shadow，不論 CSS 特異性為何。因為我們使用極大的範圍且沒有模糊，所以顏色將會是單調的。由於 --bs-table-accent-bg 預設設定為 transparent，所以我們沒有預設方框陰影。
  • 當加入 .table-striped、.table-striped-columns、.table-hover 或 .table-active 類別時，--bs-table-bg-type 或 --bs-table-bg-state（預設設定為 initial）會設定為半透明顏色（--bs-table-striped-bg、--bs-table-active-bg 或 --bs-table-hover-bg）來為背景著色並覆寫預設的 --bs-table-accent-bg。
  • 對於每個表格變體，我們會產生一個 --bs-table-accent-bg 顏色，而該顏色具有最高的對比度。例如，.table-primary 的重點顏色較深，而 .table-dark 則有較淺的重點顏色。
  • 文字和邊框顏色是以相同的方式產生，並且預設會繼承其顏色。

幕後看起來像這樣

scss/mixins/_table-variants.scss 
@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
    $table-border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$table-border-color};
    --#{$prefix}table-striped-bg: #{$striped-bg};
    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

表格邊框

帶有邊框的表格

加入 .table-bordered 以在表格和儲存格的所有側邊加上邊框。

# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered">
  ...
</table>

邊框顏色工具可以加入以變更顏色

# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered border-primary">
  ...
</table>

沒有邊框的表格

加入 .table-borderless 以取得沒有邊框的表格。

# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-borderless">
  ...
</table>
# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-dark table-borderless">
  ...
</table>

小型表格

加入 .table-sm 以讓任何 .table 變得更精簡，方法是將所有儲存格 padding 減半。

# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-sm">
  ...
</table>
# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-dark table-sm">
  ...
</table>

表格群組分隔線

加入較粗的邊框，在表格群組之間較深色—<thead>、<tbody> 和 <tfoot>—使用 .table-group-divider。透過變更 border-top-color 來自訂顏色（我們目前沒有提供此工具類別）。

# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
html 
<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 class="table-group-divider">
    <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>

垂直對齊

<thead> 的表格儲存格總是垂直置中對齊底部。<tbody> 中的表格儲存格會繼承 <table> 的對齊方式，並預設置中對齊頂部。使用 垂直對齊 類別，在需要時重新對齊。

標題 1 標題 2 標題 3 標題 4
此儲存格繼承表格的 vertical-align: middle; 此儲存格繼承表格的 vertical-align: middle; 此儲存格繼承表格的 vertical-align: middle; 這是佔位文字，用於佔用相當大的垂直空間，以說明垂直對齊如何在前面的儲存格中運作。
此儲存格繼承表格列的 vertical-align: bottom; 此儲存格繼承表格列的 vertical-align: bottom; 此儲存格繼承表格列的 vertical-align: bottom; 這是佔位文字，用於佔用相當大的垂直空間，以說明垂直對齊如何在前面的儲存格中運作。
此儲存格繼承表格的 vertical-align: middle; 此儲存格繼承表格的 vertical-align: middle; 此儲存格置中對齊頂部。 這是佔位文字，用於佔用相當大的垂直空間，以說明垂直對齊如何在前面的儲存格中運作。 
<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

巢狀

巢狀表格不會繼承邊框樣式、作用中樣式和表格變體。

# 第一個 最後一個 處理
1 標記 Otto @mdo
標頭 標頭 標頭
A 第一個 最後一個
B 第一個 最後一個
C 第一個 最後一個
3 Larry the Bird @twitter 
<table class="table table-striped table-bordered">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

巢狀運作方式

為了防止任何樣式外洩到巢狀表格，我們在 CSS 中使用子組合器 (>) 選擇器。由於我們需要鎖定 thead、tbody 和 tfoot 中的所有 td 和 th，因此我們的選擇器在沒有它時看起來會很長。因此，我們使用看起來很奇怪的 .table > :not(caption) > * > * 選擇器來鎖定 .table 的所有 td 和 th，但不會鎖定任何潛在的巢狀表格。

請注意，如果您將 <tr> 新增為表格的直接子項，這些 <tr> 預設會包覆在 <tbody> 中，因此我們的選擇器會按預期運作。

解剖

表格標頭

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

# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

表格底部

# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
頁尾 頁尾 頁尾 頁尾 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

標題

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

使用者清單
# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

您也可以將 <caption> 放在表格上方，使用 .caption-top。

使用者清單
# 第一個 最後一個 處理
1 標記 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
html 
<table class="table caption-top">
  <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|-xxl} 選擇一個最大斷點，讓回應式表格最多可以達到該斷點。

垂直裁切/截斷

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

始終回應

在每個斷點處，使用 .table-responsive 來橫向捲動表格。

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

特定斷點

視需要使用 .table-responsive{-sm|-md|-lg|-xl|-xxl} 來建立特定斷點的回應式表格。從該斷點開始，表格會正常顯示，不會橫向捲動。

這些表格可能會顯示異常，直到回應式樣式套用於特定視窗寬度。

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

<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>

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

CSS

Sass 變數

scss/_variables.scss 
$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 var(--#{$prefix}emphasis-color);
$table-bg:                    var(--#{$prefix}body-bg);
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor);

$table-border-factor:         .2;
$table-border-width:          var(--#{$prefix}border-width);
$table-border-color:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

$table-caption-color:         var(--#{$prefix}secondary-color);

$table-bg-scale:              -80%;

Sass 迴圈

scss/_variables.scss 
$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

自訂

  • 因子變數 ($table-striped-bg-factor、$table-active-bg-factor 和 $table-hover-bg-factor) 用於決定表格變體的對比度。
  • 除了淺色和深色表格變體之外，主題顏色會由 $table-bg-scale 變數變亮。