表格（Tables）

Bootstrap设置表格文件和示例（提供表格在JavaScript插件程序中的用途）

On this page

概述

由于<table>横跨其他第三方套件广泛的使用，像是calendars和date pickers，因此可选择使用Bootstrap的表格。在任何<table>加上基本类别 .table，接着使用我们的可选修饰类别或是自定义样式进行扩展。所有表格样式在Bootstrap中都不会继承，意味着嵌套表格的样式都是独立于父表格。

使用最基本的表格排版，以下是基本的.table在Bootstrap中的外观。

#	First	Last	Handle
1	Mark	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>

变量

使用语意化class给表格列或单元格上色。

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-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>范围内任何表格行增加条纹样式。

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

这些类也可以添加到表变量中：

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

可悬停行

Add.table hover可对<tbody>中的表行启用悬停状态。

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

这些可悬停的行还可以与条带化变量组合使用：

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

激活表

通过添加.table-active高亮显示表行或单元格。

#	First	Last	Handle
1	Mark	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>

#	First	Last	Handle
1	Mark	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属性设定单元格的背景。所有变数都加上该自定义属性使单元格有色彩。如此若将半透明的颜色用作表格背景，我们就不会遇到麻烦。
然后，我们在单元格上使用background-image: linear-gradient（var（--bs-table-accent-bg），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 为表格和单元格的所有边添加边框。

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

可以添加边框颜色实用程序来更改颜色：

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

无框的表格

使用.table-borderless使表格呈现无外部边框。

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

小表格

添加.table-sm将所有单元格填充减半，使任何.table更加紧凑。

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

垂直对齐

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

<table class="table table-sm table-dark">
        <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>
        </table>

嵌套

嵌套表不会继承边框样式、活动样式和表变量。

First

Last

Handle

Mark

Otto

@mdo

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

Larry

the Bird

@twitter

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

嵌套原理

为了防止任何样式泄漏到嵌套表中，我们在CSS中使用子组合符（>）选择器。由于我们需要针对thead、tbody和tfoot中的所有tds和th，没有它，我们的选择器看起来会很长。因此，我们使用外观非常奇怪的.table > :not(caption) > * > * 选择器来定位.table的所有tds和TH，但没有任何潜在的嵌套表。

结构

表头

与表格和深色表格类似，请使用修改器类。.table-light、.table-dark 使<thead>显示为浅灰色或深灰色。

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

表尾

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
Footer	Footer	Footer	Footer

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

表格标题

<caption> 的功能类似于表格的标题。它帮助屏幕阅读器的用户找到一个表，了解它的内容，并决定他们是否要阅读它。

List of users
#	First	Last	Handle
1	Mark	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-top将 <caption>放在表的顶部。

List of users
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<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-responsive包覆.table让任何响应式表格跨装置使用。或者.table中加入.table-responsive{-sm|-md|-lg|-xl|-xxl}创建响应式表格的最大断点。

垂直剪裁/缩减

响应式表格将超过表格底部或顶部边缘透过overflow-y: hidden将内容剪裁掉。具体而言，这会裁掉下拉式功能表和其他第三方的插件程序。

始终响应

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

特定断点

根据需要的响应式表格设定.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>

Sass

变量

$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-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变量变浅。