l-1

WEB教程

主页/Bootstrap V5.3 中文手册/内容样式 Content/Tables 数据表格的样式与变体

Bootstrap V5.3 中文手册

Tables 数据表格的样式与变体

使用 Bootstrap 选择加入表样式的文档和示例（鉴于它们在 JavaScript 插件中的普遍使用）。

概述

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

使用最基本的表标记，以下是基于表在 Bootstrap 中的外观。.table

# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<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>John</td>
      <td>Doe</td>
      <td>@social</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>

# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table table-striped">
  ...
</table>

条纹柱

用于将斑马条纹添加到任何表列。.table-striped-columns

# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table table-striped-columns">
  ...
</table>

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

# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table table-dark table-striped">
  ...
</table>
# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table table-dark table-striped-columns">
  ...
</table>
# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table table-success table-striped">
  ...
</table>
# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table table-success table-striped-columns">
  ...
</table>

可悬停行

Add 以在 ..table-hover<tbody>

# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table table-hover">
  ...
</table>
# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table table-dark table-hover">
  ...
</table>

这些可悬停的行也可以与条纹行变体组合：

# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table table-striped table-hover">
  ...
</table>

活动表

通过添加类来突出显示表行或单元格。.table-active

# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td class="table-active">@social</td>
    </tr>
  </tbody>
</table>
# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td class="table-active">@social</td>
    </tr>
  </tbody>
</table>

变体和重音表如何工作？

对于重音表（条带行、条带列、可悬停行和活动表），我们使用了一些技术使这些效果适用于所有表变体：

  • 我们首先使用自定义属性设置表格单元格的背景。然后，所有表格变体都会设置该自定义属性来为表格单元格着色。这样，如果使用半透明颜色作为表格背景，我们就不会遇到麻烦。--bs-table-bg
  • 然后，我们在表格单元格上添加一个插入框阴影，并在任何指定的 .它使用自定义级联来覆盖 ，而不管 CSS 的特殊性如何。因为我们使用巨大的跨页并且没有模糊，所以颜色会很单调。由于默认设置为 ，因此我们没有默认的框阴影。box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));background-colorbox-shadow--bs-table-accent-bgtransparent
  • 添加 、 或类时，将 或 （默认设置为 ） 设置为半透明颜色 （ 或 ） 以对背景进行着色并覆盖默认值 。.table-striped.table-striped-columns.table-hover.table-active--bs-table-bg-type--bs-table-bg-stateinitial--bs-table-striped-bg--bs-table-active-bg--bs-table-hover-bg--bs-table-accent-bg
  • 对于每个表变体，我们根据该颜色生成具有最高对比度的颜色。例如，的强调色较深，而强调色较浅。--bs-table-accent-bg.table-primary.table-dark
  • 文本和边框颜色的生成方式相同，默认情况下会继承它们的颜色。

在幕后，它看起来像这样：

scss/mixins/_table-variants.scss 
@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

# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table table-bordered">
  ...
</table>

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

# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table table-bordered border-primary">
  ...
</table>

无边框的表格

添加无边框的表格。.table-borderless

# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table table-borderless">
  ...
</table>
# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table table-dark table-borderless">
  ...
</table>

小桌子

通过将所有单元格切成两半来添加以使其更加紧凑。.table-sm.tablepadding

# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table table-sm">
  ...
</table>
# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table table-dark table-sm">
  ...
</table>

桌组隔板

在表组之间添加较粗的边框、较暗的边框—, ,以及 —，并添加 。通过更改颜色来自定义颜色（我们目前没有为其提供实用程序类）。<thead><tbody><tfoot>.table-group-dividerborder-top-color

# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social
[HTML全文] 
<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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

垂直对齐

的表格单元格始终垂直对齐到底部。默认情况下，表格单元格继承其对齐方式，并与顶部对齐。使用 vertical align 类在需要时重新对齐。<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>

嵌 套

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

# 第一 最后 处理
1 马克 奥托 @mdo
页眉 页眉 页眉
一个 第一 最后
B 第一 最后
C 第一 最后
3 John 母鹿 @social 
<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 中使用子组合器 （） 选择器。由于我们需要针对 、 和 中的所有 s 和 s，因此如果没有它，我们的选择器看起来会很长。因此，我们使用外观相当奇怪的选择器来定位 的所有 s 和 s，但不针对任何潜在的嵌套表。>tdththeadtbodytfoot.table > :not(caption) > * > *tdth.table

请注意，如果您将 s 添加为表的直接子项，则默认情况下这些子项将包装在 a 中，从而使我们的选择器按预期工作。<tr><tr><tbody>

解剖学

桌头

与表和深色表类似，使用修饰符类 or 使 s 显示为浅灰色或深灰色。.table-light.table-dark<thead>

# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

桌脚

# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social
页脚 页脚 页脚 页脚 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

字幕

A 的功能类似于表格的标题。它可以帮助使用屏幕阅读器的用户找到表格并了解它是关于什么的，并决定他们是否要阅读它。<caption>

用户列表
# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

您也可以将 放在桌子的顶部。<caption>.caption-top

用户列表
# 第一 最后 处理
1 马克 奥托 @mdo
2 雅 各 桑顿 @fat
3 John 母鹿 @social
[HTML全文] 
<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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

响应式表

响应式表格允许轻松水平滚动表格。通过用 包装 使任何表在所有视口中都响应。或者，使用 选择一个最大断点，以便有一个响应式表。.table.table-responsive.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 变量

scss/_variables.scss 
$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 循环

scss/_variables.scss 
$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

声明：该Bootstrap v5.3 内容来自Bootstrap v5.3官方网站；中文翻译是使用Microsoft Edge浏览器免费翻译而来，且部分存在结合了Deepseek及人工翻译。