Оригинал Посмотреть на GitHub

Таблицы

Документация и примеры для выбора стиля таблиц (учитывая их преобладающее использование в плагинах JavaScript) с помощью Bootstrap.

На этой странице

Обзор

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

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

Варианты

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

Класс	Заголовок	Заголовок
По умолчанию	Ячейка	Ячейка
Primary	Ячейка	Ячейка
Secondary	Ячейка	Ячейка
Success	Ячейка	Ячейка
Danger	Ячейка	Ячейка
Warning	Ячейка	Ячейка
Info	Ячейка	Ячейка
Light	Ячейка	Ячейка
Dark	Ячейка	Ячейка

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

Передача смысла вспомогательным технологиям

Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .visually-hidden.

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

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

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

Строки с наведением

Добавьте .table-hover, чтобы включить состояние наведения курсора на строки таблицы внутри <tbody>.

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

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

Выделите строку или ячейку таблицы, добавив класс .table-active.

#	Первый	Последний	Обработчик
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Первый	Последний	Обработчик
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<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-accent-bg); на слой поверх любого указанного background-color. Поскольку мы используем большой разброс и отсутствие размытия, цвет будет монотонным. Так как --bs-table-accent-bg по умолчанию не установлен, у нас нет тени блока по умолчанию.
Когда добавляются классы .table-striped, .table-hover или .table-active для --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));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Границы таблицы

Таблицы с границами

Добавьте .table-bordered для границ со всех сторон таблицы и ячеек.

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

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

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

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

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

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

Ячейки таблицы <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">Эта ячейка выровнена по верхнему краю.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Вложенность

Стили границ, активные стили и варианты таблиц не наследуются вложенными таблицами.

Первый

Последний

Обработчик

Mark

Otto

@mdo

Заголовок	Заголовок	Заголовок
А	Первый	Последний
Б	Первый	Последний
В	Первый	Последний

Larry

the Bird

@twitter

<table class="table table-striped">
  <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> казались светлыми или темно-серыми.

#	Первый	Последний	Обработчик
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	Первый	Последний	Обработчик
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Нижний колонтитул таблицы

#	Первый	Последний	Обработчик
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
Подвал	Подвал	Подвал	Подвал

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

Заголовки

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

Список пользователей
#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-sm">
  <caption>Список пользователей</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

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

Список пользователей
#	Первый	Последний	Обработчик
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Вертикальная обрезка/усечение

Адаптивные таблицы используют 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>

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:                 $body-color;
$table-bg:                    transparent;
$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:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Цикл

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