概述
由于第三方小部件(如日历和日期选择器)广泛使用 <table>
元素,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>
变体
使用上下文类为表格、表格行或单个单元格着色。
注意!由于生成表格变体所用的 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>
中的任何表格行添加斑马条纹。
# |
First |
Last |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
<table class="table table-striped">
...
</table>
带条纹的列
使用 .table-striped-columns
为任何表格列添加斑马条纹。
# |
First |
Last |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
<table class="table table-striped-columns">
...
</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-dark table-striped-columns">
...
</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>
# |
First |
Last |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
<table class="table table-success table-striped-columns">
...
</table>
可悬停的行
添加 .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
自定义属性设置表格单元格的背景。然后,所有表格变体都设置该自定义属性以给表格单元格着色。这样,如果使用半透明颜色作为表格背景,我们就不会遇到麻烦。
- 然后,我们在表格单元格上添加一个内嵌框阴影,使用
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
的强调色较浅。
- 文本和边框颜色以相同的方式生成,默认情况下会继承其颜色。
在幕后看起来像这样
@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
以在表格和单元格的所有侧面添加边框。
# |
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
更加紧凑,方法是将所有单元格 padding
减半。
# |
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>
表格组分隔符
使用 .table-group-divider
在表格组(<thead>
、<tbody>
和 <tfoot>
)之间添加较粗的边框,颜色较深。通过更改 border-top-color
(我们目前不为此提供实用程序类)来自定义颜色。
# |
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 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>
嵌套
嵌套表格不会继承边框样式、活动样式和表格变体。
# |
First |
Last |
Handle |
1 |
Mark |
Otto |
@mdo |
标题 |
标题 |
标题 |
A |
First |
Last |
B |
First |
Last |
C |
First |
Last |
|
3 |
拉里 |
鸟 |
@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>
呈现浅灰色或深灰色。
# |
First |
Last |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
拉里 |
鸟 |
@twitter |
<table class="table">
<thead class="table-light">
...
</thead>
<tbody>
...
</tbody>
</table>
# |
First |
Last |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
拉里 |
鸟 |
@twitter |
<table class="table">
<thead class="table-dark">
...
</thead>
<tbody>
...
</tbody>
</table>
# |
First |
Last |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
拉里 |
鸟 |
@twitter |
页脚 |
页脚 |
页脚 |
页脚 |
<table class="table">
<thead>
...
</thead>
<tbody>
...
</tbody>
<tfoot>
...
</tfoot>
</table>
标题
<caption>
用作表格的标题。它帮助使用屏幕阅读器的用户查找表格并了解其内容,并决定是否要阅读它。
用户列表
# |
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>
放在表格顶部。
用户列表
# |
First |
Last |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
拉里 |
鸟 |
@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-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 变量
$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 循环
$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
变量变亮。