Bootstrap5 表格（Tables）

原创
半兽人 发表于: 2020-07-27   最后更新时间: 2021-04-15 16:58:21  
{{totalSubscript}} 订阅， 4,263 游览

概述

由于<table>元素在第三方（如日历和日期选择器）中的广泛使用，Bootstrap的表格是可选的。将基类.table添加到任何的<table>中，然后用我们可选的修饰类或自定义样式进行扩展。在Bootstrap中，所有的表格样式都是不继承的，这意味着任何嵌套的表格都可以独立于父表的样式。

使用最基本的表格标记，下面是Bootstrap中.table-based表格的样子。

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

在线运行

变体

使用上下文类对表格、表格行或单个单元格进行上色。

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

在线运行

装饰表（Accented tables）

条纹行

使用.table-striped对<tbody>内的table行添加斑马条纹。

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

在线运行

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

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

在线运行

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

在线运行

可悬停行

增加.table-hover，使<tbody>中的表行处于悬停状态。

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

在线运行

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

在线运行

这些可悬停的行也可以与有条纹的结合使用：

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

在线运行

活跃表格

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

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

在线运行

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

在线运行

表格边框

边框表格

增加.table-bordered，用于表格和单元格所有边框。

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

在线运行

可以使用边框颜色实用工具来改变颜色:

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

在线运行

无边框表格

如果你需要无边框表格，添加.table-borderless。

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

在线运行

小表格

增加.table-sm，将所有单元格padding减半，使.table更加紧凑。

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

在线运行

垂直对齐

<thead>的表格单元格总是垂直于底部对齐。<tbody>中的表格单元格继承了<table>中的对齐方式，并且默认为向顶部对齐。在需要的地方使用垂直对齐类来重新对齐。

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

在线运行

嵌套（Nesting）

边框样式、活动样式和表格变体不被嵌套表格继承。

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

在线运行

Anatomy

表格头

类似于表格和深色表格，使用.table-light或.table-dark使<thead>呈现浅灰色或深灰色。

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

在线运行

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

在线运行

表格底部（Table foot）

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

在线运行

题注（Captions）

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

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

在线运行

<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来实现水平滚动表格。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

在线运行

特定断点（Breakpoint specific）

根据需要使用.table-responsive{-sm|-md|-lg|-xl|-xxl}来创建响应式表格，直到特定的断点。从该断点开始，表格将正常运行，不会水平滚动。

这些表格可能会出现断点，直到它们的响应式风格适用于特定的窗口宽度。

<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%;

Loop

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

更新于 2021-04-15
半兽人

查看bootstrap5更多相关的文章或提一个关于bootstrap5的问题，也可以与我们一起分享文章。