桌子

表-Bootstrap 5和Material Design 2.0

表格使您可以汇总大量数据,并以清晰有序的方式呈现它们。 MDB表提供了其他好处,例如响应能力和操作可能性 表格样式。

由于广泛使用 <table> e日历和日期选择器等第三方窗口小部件中的元素,引导表为选择加入。将基类 .table 添加到任何 <table>,然后用我们的可选扩展 修饰符类或自定义样式。所有表样式均未在Bootstrap中继承,这意味着 任何嵌套表都可以独立于父表设置样式。


基本例子

使用最基本的表标记,这就是基于 .table 的表在MDB中的外观。

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

          <table class="table">
            <thead>
              <tr>
                <th scope="col">Class</th>
                <th scope="col">Heading</th>
                <th scope="col">Heading</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">Default</th>
                <td>Cell</td>
                <td>Cell</td>
              </tr>

              <tr class="table-primary">
                <th scope="row">Primary</th>
                <td>Cell</td>
                <td>Cell</td>
              </tr>
              <tr class="table-secondary">
                <th scope="row">Secondary</th>
                <td>Cell</td>
                <td>Cell</td>
              </tr>
              <tr class="table-success">
                <th scope="row">Success</th>
                <td>Cell</td>
                <td>Cell</td>
              </tr>
              <tr class="table-danger">
                <th scope="row">Danger</th>
                <td>Cell</td>
                <td>Cell</td>
              </tr>
              <tr class="table-warning">
                <th scope="row">Warning</th>
                <td>Cell</td>
                <td>Cell</td>
              </tr>
              <tr class="table-info">
                <th scope="row">Info</th>
                <td>Cell</td>
                <td>Cell</td>
              </tr>
              <tr class="table-light">
                <th scope="row">Light</th>
                <td>Cell</td>
                <td>Cell</td>
              </tr>
              <tr class="table-dark">
                <th scope="row">Dark</th>
                <td>Cell</td>
                <td>Cell</td>
              </tr>
            </tbody>
          </table>
        

向辅助技术体现含义:
使用颜色添加含义仅提供视觉指示,不会传达给 辅助技术的用户-例如屏幕阅读器。确保信息表示为 颜色可以从内容本身(例如可见文字)中显而易见,也可以包含在内 通过其他方式,例如用 .visually-hidden 类。


条状

Use .table-striped to add zebra-striping to any table row within the <tbody>.

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

          <table class="table table-striped"></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-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>
              <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
              </tr>
            </thead>
            <tbody>
              <tr class="table-active">
                <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" class="table-active">Larry the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        

带边框

在表格和单元格的所有边上添加 .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>
        

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

垂直对齐

表单元格<thead> a始终与底部垂直对齐。表 内的细胞<tbody> 从其继承 <table> 并且默认情况下与顶部对齐。使用 v垂直对齐 重新排列的类 在需要的地方。

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 Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.
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 Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.
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. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.

          <table class="table align-middle">
            <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 class="align-bottom">
                <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 class="align-top">@twitter</td>
              </tr>
            </tbody>
          </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>
        

嵌套如何工作

为了防止 any 样式泄漏到嵌套表中,我们使用子组合器 (>) CSS中的选择器。由于我们需要定位所有 td thead tbody tfoot 中的第 th 个, 没有它,选择器看起来会很长。因此,我们使用看起来很奇怪的外观 .table > :not(caption) > * > * 选择器定位所有 td .table th ,但没有任何潜在的嵌套表。

请注意,如果您添加<tr>s 作为桌子的直子 <tr> 将被包裹在 <tbody> 默认情况下,因此 使我们的选择器按预期工作。


解剖学

表头

与表和黑表类似,请使用修饰符类 .table-light .table-dark <thead>s 出现浅灰色或深灰色。

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

Table foot

# 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> 在桌子的顶部 .caption-top.

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 与所有视口响应 .table-sensitive 。或者,选择一个最大断点 响应表,直到使用 .table-sensitive {-sm | -md | -lg | -xl | -xxl}

垂直剪辑/截断:
响应表使用 overflow-y:hidden (可隐藏所有内容) 超出了表格的底部或顶部边缘。特别是,这可以切断 下拉菜单和其他第三方小部件。

始终响应

在每个断点处,使用 .table-sensitive 进行水平滚动 表。

# 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-sensitive {-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-striped-bg-factor $table-active-bg-factor & $table-hover-bg-factor) 被使用 确定表变体中的对比度。
  • 除了光& 黑暗的桌子变体,主题颜色通过 $table-bg-level 变量。

      
              $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-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-seperator-color: currentColor;
              
              $table-caption-color:         $text-muted;
              
              $table-bg-level:              -9;
              
              $table-variants: (
                "primary":    color-level($primary, $table-bg-level),
                "secondary":  color-level($secondary, $table-bg-level),
                "success":    color-level($success, $table-bg-level),
                "info":       color-level($info, $table-bg-level),
                "warning":    color-level($warning, $table-bg-level),
                "danger":     color-level($danger, $table-bg-level),
                "light":      $light,
                "dark":       $dark,
              );