Bootstrap tables (таблицы)

Краткий обзор

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

Bootstrap 5 tables CSS

CSS стили бутстрап таблиц, для того чтобы использовать их в любом web-проекте, даже без bootstrap.

table{caption-side:bottom;border-collapse:collapse}
.table{--bs-table-color-type:initial;--bs-table-bg-type:initial;--bs-table-color-state:initial;--bs-table-bg-state:initial;--bs-table-color:var(--bs-emphasis-color);--bs-table-bg:var(--bs-body-bg);--bs-table-border-color:var(--bs-border-color);--bs-table-accent-bg:transparent;--bs-table-striped-color:var(--bs-emphasis-color);--bs-table-striped-bg:rgba(var(--bs-emphasis-color-rgb),0.05);--bs-table-active-color:var(--bs-emphasis-color);--bs-table-active-bg:rgba(var(--bs-emphasis-color-rgb),0.1);--bs-table-hover-color:var(--bs-emphasis-color);--bs-table-hover-bg:rgba(var(--bs-emphasis-color-rgb),0.075);width:100%;margin-bottom:1rem;vertical-align:top;border-color:var(--bs-table-border-color)}
.table > :not(caption) > * > *{padding:.5rem;color:var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color)));background-color:var(--bs-table-bg);border-bottom-width:var(--bs-border-width);box-shadow:inset 0 0 0 9999px var(--bs-table-bg-state,var(--bs-table-bg-type,var(--bs-table-accent-bg)))}
.table > tbody{vertical-align:inherit}
.table > thead{vertical-align:bottom}
.table-group-divider{border-top:calc(var(--bs-border-width) * 2) solid currentcolor}
.caption-top{caption-side:top}
.table-sm > :not(caption) > * > *{padding:.25rem}
.table-bordered > :not(caption) > *{border-width:var(--bs-border-width) 0}
.table-bordered > :not(caption) > * > *{border-width:0 var(--bs-border-width)}
.table-borderless > :not(caption) > * > *{border-bottom-width:0}
.table-borderless > :not(:first-child){border-top-width:0}
.table-striped > tbody > tr:nth-of-type(odd) > *{--bs-table-color-type:var(--bs-table-striped-color);--bs-table-bg-type:var(--bs-table-striped-bg)}
.table-striped-columns > :not(caption) > tr > :nth-child(even){--bs-table-color-type:var(--bs-table-striped-color);--bs-table-bg-type:var(--bs-table-striped-bg)}
.table-active{--bs-table-color-state:var(--bs-table-active-color);--bs-table-bg-state:var(--bs-table-active-bg)}
.table-hover > tbody > tr:hover > *{--bs-table-color-state:var(--bs-table-hover-color);--bs-table-bg-state:var(--bs-table-hover-bg)}
.table-primary{--bs-table-color:#000;--bs-table-bg:#cfe2ff;--bs-table-border-color:#a6b5cc;--bs-table-striped-bg:#c5d7f2;--bs-table-striped-color:#000;--bs-table-active-bg:#bacbe6;--bs-table-active-color:#000;--bs-table-hover-bg:#bfd1ec;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}
.table-secondary{--bs-table-color:#000;--bs-table-bg:#e2e3e5;--bs-table-border-color:#b5b6b7;--bs-table-striped-bg:#d7d8da;--bs-table-striped-color:#000;--bs-table-active-bg:#cbccce;--bs-table-active-color:#000;--bs-table-hover-bg:#d1d2d4;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}
.table-success{--bs-table-color:#000;--bs-table-bg:#d1e7dd;--bs-table-border-color:#a7b9b1;--bs-table-striped-bg:#c7dbd2;--bs-table-striped-color:#000;--bs-table-active-bg:#bcd0c7;--bs-table-active-color:#000;--bs-table-hover-bg:#c1d6cc;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}
.table-info{--bs-table-color:#000;--bs-table-bg:#cff4fc;--bs-table-border-color:#a6c3ca;--bs-table-striped-bg:#c5e8ef;--bs-table-striped-color:#000;--bs-table-active-bg:#badce3;--bs-table-active-color:#000;--bs-table-hover-bg:#bfe2e9;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}
.table-warning{--bs-table-color:#000;--bs-table-bg:#fff3cd;--bs-table-border-color:#ccc2a4;--bs-table-striped-bg:#f2e7c3;--bs-table-striped-color:#000;--bs-table-active-bg:#e6dbb9;--bs-table-active-color:#000;--bs-table-hover-bg:#ece1be;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}
.table-danger{--bs-table-color:#000;--bs-table-bg:#f8d7da;--bs-table-border-color:#c6acae;--bs-table-striped-bg:#eccccf;--bs-table-striped-color:#000;--bs-table-active-bg:#dfc2c4;--bs-table-active-color:#000;--bs-table-hover-bg:#e5c7ca;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}
.table-light{--bs-table-color:#000;--bs-table-bg:#f8f9fa;--bs-table-border-color:#c6c7c8;--bs-table-striped-bg:#ecedee;--bs-table-striped-color:#000;--bs-table-active-bg:#dfe0e1;--bs-table-active-color:#000;--bs-table-hover-bg:#e5e6e7;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}
.table-dark{--bs-table-color:#fff;--bs-table-bg:#212529;--bs-table-border-color:#4d5154;--bs-table-striped-bg:#2c3034;--bs-table-striped-color:#fff;--bs-table-active-bg:#373b3e;--bs-table-active-color:#fff;--bs-table-hover-bg:#323539;--bs-table-hover-color:#fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width: 575.98px) {
.table-responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width: 767.98px) {
.table-responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width: 991.98px) {
.table-responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width: 1199.98px) {
.table-responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width: 1399.98px) {
.table-responsive-xxl{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

Базовая таблица

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

<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>Марк</td>
      <td>Отто</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Якоб</td>
      <td>Торнтон</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Ларри Бёрд</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Варианты стилей (расскраска) таблиц

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

Внимание! Из-за сложного CSS, используемого для создания вариантов таблиц, они, скорее всего, не увидят адаптивного оформления в цветовом режиме до версии 6.

<!-- На таблицах -->
<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 (чередующиеся строки)

Используйте класс .table-striped для добавления чередования зеброй к любой строке таблицы в <tbody>.

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

Table striped columns (полосатые столбцы)

Используйте класс .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 (выделение строк при наведении)

Добавьте класс .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-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">Ларри Бёрд</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">Ларри Бёрд</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, чтобы сделать любую из из таблиц более компактной.

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

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

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

<table class="table table-sm">
  <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>Марк</td>
      <td>Отто</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Якоб</td>
      <td>Торнтон</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Ларри Бёрд</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>s в качестве прямых дочерних элементов таблицы, они <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 foot

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Подписи

A <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>Марк</td>
      <td>Отто</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Якоб</td>
      <td>Торнтон</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Ларри Бёрд</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

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.

Дополнительно

table scroll (таблицы с прокруткой)

Для создания прокручиваемой таблицы в Bootstrap 5 вы можете использовать класс .table-responsive. А вот чтобы установить максимальную высоту таблицы, добавьте стиль max-height к .table-responsive. Например:

<div class="table-responsive" style="max-height: 110px;">
  <table class="table">
    <!-- Ваш контент -->
  </table>
</div>

sticky header table (Таблица с закрепленным заголовком)

Для создания таблицы с закрепленным заголовком (sticky header) в Bootstrap 5, вы можете использовать стандартные CSS-стили.

th {
  position: sticky;
  top: 0;
  background-color: #ffffff; /* Цвет фона заголовка */
}

Это установит заголовок таблицы в верхней части страницы при прокрутке.

Таблица с поиском

Для создания таблицы с поиском в Bootstrap 5, вы можете воспользоваться встроенными классами и атрибутами.

<input type="text" id="searchInput" placeholder="Поиск...">
<table class="table">
  <!-- Ваш контент -->
</table>

Далее инизиализируйте поиск:

<script>
  const searchInput = document.getElementById('searchInput');
  const tableRows = document.querySelectorAll('.table tbody tr');

  searchInput.addEventListener('input', () => {
    const searchTerm = searchInput.value.toLowerCase();
    tableRows.forEach(row => {
      const rowText = row.textContent.toLowerCase();
      row.style.display = rowText.includes(searchTerm) ? '' : 'none';
    });
  });
</script>

FAQ (ответы на часто задаваемые вопросы)