Bootstrap5 表格(Tables)

半兽人 发表于: 2020-07-27   最后更新时间: 2020-07-28  

概述

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

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

Variants

Use contextual classes to color tables, table rows or individual cells.

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

在线运行

These classes can also be added to table variants:

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

在线运行

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

在线运行

Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

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

在线运行

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

在线运行

These hoverable rows can also be combined with the striped variant:

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

在线运行

Active tables

Highlight a table row or cell by adding a .table-active class.

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

Bordered tables

Add .table-bordered for borders on all sides of the table and cells.

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

在线运行

Border color utilities can be added to change colors:

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

在线运行

Tables without borders

Add .table-borderless for a table without borders.

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

在线运行

Small tables

Add .table-sm to make any .table more compact by cutting all cell padding in half.

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

在线运行

Vertical alignment

Table cells of <thead> are always vertical aligned to the bottom. Table cells in <tbody> inherit their alignment from <table> and are aligned to the the top by default. Use the vertical align classes to re-align where needed.

<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

Border styles, active styles, and table variants are not inherited by nested tables.

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

在线运行

Anatomy

Table head

Similar to tables and dark tables, use the modifier classes .table-light or .table-dark to make <thead>s appear light or dark gray.

<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

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

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

在线运行

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

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

在线运行

Breakpoint specific

Use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

These tables may appear broken until their responsive styles apply at specific viewport widths.

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

在线运行

Customizing in Sass

  • The factor variables ($table-striped-bg-factor, $table-active-bg-factor & $table-hover-bg-factor) are used to determine the contrast in table variants.
  • Apart from the light & dark table variants, theme colors are lightened by the $table-bg-level variable.
$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,
);


您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容




上一条: Bootstrap5 图片(Images)
下一条: Bootstrap5 图表(Figures)