表格(Tables)

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

概述

由于<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
1 Mark Otto @mdo
Header Header Header
A First Last
B First Last
C First Last
3 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变量变浅。
返回顶部