Spec-Zone.ru › Bootstrap 5

Таблицы

Обзор

Из-за широкого использования элементов <table> в сторонних виджетах, таких как календари и выборщики дат, таблицы Bootstrap — это опциональная функция. Добавьте базовый класс .table к любому <table>, а затем расширьте его нашими необязательными модификаторами или пользовательскими стилями. Все стили таблиц в Bootstrap не наследуются, что означает, что любые вложенные таблицы могут быть стилизованы независимо от родительской таблицы.

Используя самый базовый разметку таблицы, вот как таблицы на основе .table выглядят в Bootstrap.

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

Варианты

Используйте контекстные классы для изменения цвета таблиц, строк таблиц или отдельных ячеек.

Обратите внимание! Из-за более сложного 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>. 

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

Полосатые столбцы

Используйте .table-striped-columns для добавления полосатой расцветки столбцов.

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

Эти классы также можно добавить к вариантам таблиц:

<table class="table table-dark table-striped">
  ...
</table>
<table class="table table-dark table-striped-columns">
  ...
</table>
<table class="table table-success table-striped">
  ...
</table>
<table class="table table-success table-striped-columns">
  ...
</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>

Как работают варианты и стилизованные таблицы?

Для стилизованных таблиц (полосатые строки, полосатые столбцы, строки с эффектом наведения и активные таблицы) мы использовали некоторые приемы, чтобы эти эффекты работали для всех наших вариантов таблиц:

  • Мы начинаем с установки фона ячейки таблицы с помощью пользовательской переменной --bs-table-bg. Все варианты таблиц затем устанавливают эту пользовательскую переменную для раскрашивания ячеек таблицы. Таким образом, мы не столкнемся с проблемами, если в качестве фона таблиц используются полупрозрачные цвета.
  • Затем мы добавляем в ячейки таблицы вставной тенью с box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));, чтобы наложить её поверх любого заданного background-color. Она использует пользовательскую каскадную систему, чтобы переопределять box-shadow, независимо от специфичности CSS. Поскольку мы используем большой радиус размытия и без размытия, цвет будет однотонным. Поскольку --bs-table-accent-bg по умолчанию установлена в transparent, у нас нет стандартной тени.
  • Когда добавляются классы .table-striped, .table-striped-columns, .table-hover или .table-active, то либо --bs-table-bg-type, либо --bs-table-bg-state (по умолчанию установленные в initial) устанавливаются в полупрозрачный цвет (--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 для границ со всех сторон таблицы и ячеек.

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

Утилиты цвета границ могут быть добавлены для изменения цветов:

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

Таблицы без границ

Добавьте .table-borderless для таблицы без границ.

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

Маленькие таблицы

Добавьте .table-sm чтобы сделать любую .table более компактной, уменьшив размер ячеек padding вдвое.

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

Разделители групп таблиц

Добавьте более толстую границу, более тёмную между группами таблиц — <thead>, <tbody>, и <tfoot> — с помощью .table-group-divider. Настройте цвет, изменив border-top-color (для которого у нас в данный момент нет утилитного класса).

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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Вертикальное выравнивание

Ячейки таблицы <thead> всегда выравниваются по нижнему краю. Ячейки в <tbody> наследуют выравнивание от <table> и по умолчанию выравниваются по верхнему краю. Используйте классы вертикального выравнивания, чтобы перевыровнять их по необходимости.

<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 class="table table-striped table-bordered">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Как работает вложение

Чтобы предотвратить утечку любых стилей во вложенные таблицы, мы используем селектор с сочетателем потомков (>) в нашем CSS. Поскольку нам нужно выбрать все td и th в thead, tbody, и tfoot, наш селектор будет довольно длинным без него. Поэтому мы используем довольно необычный селектор .table > :not(caption) > * > * для выбора всех td и th у .table, но ни у каких вложенных таблиц.

Обратите внимание, что если вы добавите <tr> в качестве непосредственных потомков таблицы, эти <tr> будут обернуты в <tbody> по умолчанию, что позволит нашим селекторам работать как ожидается.

Структура

Заголовок таблицы

Аналогично обычным и тёмным таблицам, используйте модификаторы .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 class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Подписи

Подпись <caption> действует как заголовок таблицы. Она помогает пользователям программ чтения с экрана найти таблицу, понять, о чём она и решить, стоит ли её читать.

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

Вы также можете разместить <caption> в верхней части таблицы с помощью .caption-top.

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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Реагирующие таблицы

Реагирующие таблицы позволяют легко прокручивать таблицы по горизонтали. Сделайте любую таблицу адаптивной на всех разрешениях, обернув .table с .table-responsive. Либо выберите максимальную точку разрыва, до которой таблица будет адаптивной, используя .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Вертикальное обрезание/обрезание

Реагирующие таблицы используют overflow-y: hidden, что обрезает любое содержимое, выходящее за нижние или верхние края таблицы. В частности, это может обрезать выпадающие меню и другие сторонние виджеты.

Всегда адаптивные

На всех точках разрыва используйте .table-responsive для горизонтально прокручиваемых таблиц.

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

Конкретные для точек разрыва

Используйте .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>

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}body-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($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:          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.

© 2011–2022 Twitter, Inc.
© 2011–2022 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/5.3/content/tables/

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API