Source

表

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

例子

由於在日曆和日期選擇器等第三方小部件中廣泛使用表格，我們將表格設計為可選擇加入的。只需將基類添加.table到 any <table>，然後使用自定義樣式或我們包含的各種修飾符類進行擴展。

使用最基本的表格標記，這是.table基於 - 的表格在 Bootstrap 中的外觀。所有表格樣式都在 Bootstrap 4 中繼承，這意味著任何嵌套表格的樣式都將與父表格相同。

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

您還可以使用.table-dark.

# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里 鳥 @推特 
<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>s 顯示為淺灰色或深灰色。

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

# 第一的 最後的 處理
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<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 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<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 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<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 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<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-視口的限制（例如，在高 dpi 設備上的某些條件下可能發生） .

字幕

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

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

響應式表

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