Таблицы

Обзор

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

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

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Обращение</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>

Варианты

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

<!-- На таблицах -->
<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>

<!-- На строках -->
<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>

<!-- На ячейках (`td` или `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>

Акцентированные таблицы

Полосатые строки

Используйте .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 светлее.
• Цвета текста и границ генерируются одинаково, а их цвета наследуются по умолчанию.

За кадром это выглядит так:

@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 (для которого в настоящее время мы не предоставляем служебный класс).

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Первый</th>
      <th scope="col">Последний</th>
      <th scope="col">Обработчик</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">Эта ячейка выровнена по верхнему краю.</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>Список пользователей</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

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

<table class="table caption-top">
  <caption>Список пользователей</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Первый</th>
      <th scope="col">Последний</th>
      <th scope="col">Обработчик</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}.

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

Через каждую контрольную точку используйте .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 переменные

$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 циклы

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