表格（Tables）

使用 Bootstrap 為表格選擇性套用樣式的文件與範例（考慮到它們在 JavaScript 外掛中的廣泛使用）。

本頁內容

概覽（Overview）

由於 <table> 元素在日曆和日期選擇器等第三方小工具中的廣泛使用，Bootstrap 的表格是選擇性啟用的。將基礎類別 .table 加入到任何 <table>，然後使用我們的可選修飾類別或自訂樣式進行擴充。所有表格樣式在 Bootstrap 中都不會繼承，這意味著任何巢狀表格都可以獨立於父表格進行樣式設定。

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

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

變體（Variants）

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

注意！ 由於我們使用了更複雜的 CSS 來產生表格變體，它們很可能要到 v6 才會看到色彩模式自適應樣式。

Class	Heading	Heading
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

<!-- On tables -->
<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>
<table class="table table-light">...</table>
<table class="table 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 類別隱藏的額外文字。

強調表格（Accented tables）

條紋列（Striped rows）

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

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-striped">
  ...
</table>

條紋欄（Striped columns）

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

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-striped-columns">
  ...
</table>

這些類別也可以加入到表格變體中：

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-dark table-striped">
  ...
</table>

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-dark table-striped-columns">
  ...
</table>

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-success table-striped">
  ...
</table>

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-success table-striped-columns">
  ...
</table>

懸停列（Hoverable rows）

新增 .table-hover 以在 <tbody> 內的表格列上啟用懸停狀態。

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-hover">
  ...
</table>

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-dark table-hover">
  ...
</table>

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

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-striped table-hover">
  ...
</table>

啟用狀態表格（Active tables）

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

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td class="table-active">@social</td>
    </tr>
  </tbody>
</table>

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td class="table-active">@social</td>
    </tr>
  </tbody>
</table>

變體和強調表格的運作原理（How do the variants and accented tables work?）

對於強調表格（條紋列、條紋欄、懸停列和啟用狀態表格），我們使用了一些技術來讓這些效果適用於所有表格變體：

我們首先使用 --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))); 在表格儲存格上新增內嵌 box shadow，以層疊在任何指定的 background-color 之上。它使用自訂層疊來覆蓋 box-shadow，無論 CSS 特異性如何。因為我們使用巨大的擴散且沒有模糊，顏色將是單色的。由於 --bs-table-accent-bg 預設設定為 transparent，我們沒有預設的 box shadow。
當新增 .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)}; // stylelint-disable-line scss/dollar-variable-no-missing-interpolation
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)}; // stylelint-disable-line scss/dollar-variable-no-missing-interpolation
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)}; // stylelint-disable-line scss/dollar-variable-no-missing-interpolation

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

表格邊框（Table borders）

有邊框表格（Bordered tables）

新增 .table-bordered 以在表格和儲存格的所有邊上新增邊框。

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

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

可以新增邊框顏色通用類別來改變顏色：

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-bordered border-primary">
  ...
</table>

無邊框表格（Tables without borders）

新增 .table-borderless 以獲得無邊框的表格。

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-borderless">
  ...
</table>

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-dark table-borderless">
  ...
</table>

小型表格（Small tables）

新增 .table-sm 來透過將所有儲存格的 padding 減半，使任何 .table 更加緊湊。

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-sm">
  ...
</table>

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-dark table-sm">
  ...
</table>

表格群組分隔線（Table group dividers）

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

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

垂直對齊（Vertical alignment）

<thead> 的表格儲存格始終垂直對齊到底部。<tbody> 中的表格儲存格從 <table> 繼承其對齊方式，預設對齊到頂部。使用垂直對齊類別在需要時重新對齊。

Heading 1	Heading 2	Heading 3	Heading 4
This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits `vertical-align: bottom;` from the table row	This cell inherits `vertical-align: bottom;` from the table row	This cell inherits `vertical-align: bottom;` from the table row	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This cell is aligned to the top.	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.

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

巢狀（Nesting）

邊框樣式、啟用狀態樣式和表格變體不會被巢狀表格繼承。

First

Last

Handle

Mark

Otto

@mdo

Header	Header	Header
A	First	Last
B	First	Last
C	First	Last

John

Doe

@social

<table class="table table-striped table-bordered">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

巢狀的運作原理（How nesting works）

為了防止_任何_樣式洩漏到巢狀表格，我們在 CSS 中使用子元素組合器（>）選擇器。由於我們需要針對 thead、tbody 和 tfoot 中的所有 td 和 th，如果沒有它，我們的選擇器會看起來很長。因此，我們使用看起來相當奇怪的 .table > :not(caption) > * > * 選擇器來針對 .table 的所有 td 和 th，但不包括任何潛在的巢狀表格。

請注意，如果您將 <tr> 直接加入為表格的子元素，這些 <tr> 將預設被包裹在 <tbody> 中，因此我們的選擇器會按預期工作。

結構（Anatomy）

表頭（Table head）

與表格和深色表格類似，使用修飾類別 .table-light 或 .table-dark 讓 <thead> 呈現淺灰或深灰色。

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

表尾（Table foot）

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social
Footer	Footer	Footer	Footer

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

標題（Captions）

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

List of users
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

您也可以使用 .caption-top 將 <caption> 放在表格頂部。

List of users
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

響應式表格（Responsive tables）

響應式表格讓表格可以輕鬆地水平捲動。透過用 .table-responsive 包裹 .table，讓任何表格在所有視窗大小中都具有響應性。或者，使用 .table-responsive{-sm|-md|-lg|-xl|-xxl} 來選擇一個最大中斷點，讓表格在該中斷點以下具有響應性。

垂直裁剪/截斷

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

始終響應式（Always responsive）

在每個中斷點，使用 .table-responsive 來實現水平捲動的表格。

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

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

特定中斷點（Breakpoint specific）

根據需要使用 .table-responsive{-sm|-md|-lg|-xl|-xxl} 來建立直到特定中斷點的響應式表格。從該中斷點及以上，表格將正常運作且不會水平捲動。

這些表格可能會顯得不正常，直到它們的響應式樣式在特定視窗寬度套用為止。

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<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 變數（Sass variables）

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 迴圈（Sass loops）

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,
);

自訂（Customizing）

因子變數（$table-striped-bg-factor、$table-active-bg-factor 和 $table-hover-bg-factor）用於決定表格變體的對比度。
除了淺色和深色表格變體之外，主題顏色會透過 $table-bg-scale 變數進行調淡。