跳到主要內容 跳到文檔導航
in English

表

使用 Bootstrap 選擇表格樣式的文檔和示例（鑑於它們在 JavaScript 插件中的普遍使用）。

在本頁面

概述

由於在<table>日曆和日期選擇器等第三方小部件中廣泛使用元素，Bootstrap 的表格是可選的。將基類添加.table到 any <table>，然後使用我們的可選修飾符類或自定義樣式進行擴展。Bootstrap 中不會繼承所有表格樣式，這意味著任何嵌套表格都可以獨立於父表格進行樣式設置。

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

# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<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>

變體

使用上下文類為表格、表格行或單個單元格著色。

班級 標題 標題
默認 細胞 細胞
基本的 細胞 細胞
中學 細胞 細胞
成功 細胞 細胞
危險 細胞 細胞
警告 細胞 細胞
信息 細胞 細胞
光 細胞 細胞
黑暗的 細胞 細胞 
<!-- 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 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<table class="table table-striped">
  ...
</table>

這些類也可以添加到表變體中：

# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<table class="table table-dark table-striped">
  ...
</table>
# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<table class="table table-success table-striped">
  ...
</table>

可懸停的行

添加.table-hover以在<tbody>.

# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<table class="table table-hover">
  ...
</table>
# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<table class="table table-dark table-hover">
  ...
</table>

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

# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<table class="table table-striped table-hover">
  ...
</table>

活動表

.table-active通過添加類突出顯示表格行或單元格。

# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<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 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<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-accent-bg);在任何指定的background-color. 因為我們使用了巨大的傳播並且沒有模糊，所以顏色會是單調的。由於--bs-table-accent-bg默認情況下未設置，因此我們沒有默認的盒子陰影。
  • 添加 或 類時，將設置為.table-striped半透明顏色以對背景進行著色。.table-hover.table-active--bs-table-accent-bg
  • 對於每個表格變體，我們--bs-table-accent-bg根據該顏色生成具有最高對比度的顏色。例如，強調色.table-primary較暗，而.table-dark強調色較淺。
  • 文本和邊框顏色的生成方式相同，默認繼承它們的顏色。

在幕後它看起來像這樣：

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

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

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

表格邊框

有邊框的桌子

.table-bordered在表格和單元格的所有邊添加邊框。

# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<table class="table table-bordered">
  ...
</table>

可以添加邊框顏色實用程序來更改顏色：

# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<table class="table table-bordered border-primary">
  ...
</table>

無邊框表格

為沒有邊框的表格添加.table-borderless。

# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<table class="table table-borderless">
  ...
</table>
# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<table class="table table-dark table-borderless">
  ...
</table>

小桌子

通過將所有單元格切成兩半來添加.table-sm以使其.table更緊湊。padding

# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<table class="table table-sm">
  ...
</table>
# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<table class="table table-dark table-sm">
  ...
</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 標記 奧托 @mdo
標題 標題 標題
一個 第一的 最後的
乙 第一的 最後的
C 第一的 最後的
3 拉里 鳥 @推特 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

嵌套的工作原理

為了防止任何樣式洩漏到嵌套表中，我們>在 CSS 中使用子組合器 ( ) 選擇器。由於我們需要定位 , 和 中的所有std和ths，thead如果沒有它，我們的選擇器看起來會很長。因此，我們使用看起來很奇怪的選擇器來定位 s 的所有s 和s ，但沒有任何潛在的嵌套表。tbodytfoot.table > :not(caption) > * > *tdth.table

請注意，如果您將<tr>s 添加為表的直接子項，則默認情況下這些子項<tr>將包裝在 a<tbody>中，從而使我們的選擇器按預期工作。

解剖學

表頭

與表和暗表類似，使用修飾符類.table-light或.table-dark使<thead>s 顯示為淺灰色或深灰色。

# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里 鳥 @推特 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里 鳥 @推特 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

桌腳

# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里 鳥 @推特
頁腳 頁腳 頁腳 頁腳 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

字幕

A 的<caption>功能類似於表格的標題。它可以幫助使用屏幕閱讀器的用戶找到一個表格並了解它的內容並決定他們是否要閱讀它。

用戶列表
# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

您也可以使用 將 放在<caption>桌子的頂部.caption-top。

用戶列表
# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里 鳥 @推特 
<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>

響應式表

響應式表格允許表格輕鬆水平滾動。通過將 a 包裹起來，使任何表格在所有視口中都具有響應.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>

薩斯

變量

$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:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

環形

$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-level變量變亮。