Bootstrap таблицы

Обзор

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

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

#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри Птица		@twitter

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

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

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

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

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

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

#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри Птица		@twitter

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

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

#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри Птица		@twitter

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

#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри Птица		@twitter

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

Парящие ряды

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

#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри Птица		@twitter

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

#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри Птица		@twitter

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

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

#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри Птица		@twitter

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

Активные столы

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

#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри Птица		@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	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри Птица		@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 настраиваемого свойства. Затем все варианты таблицы устанавливают это настраиваемое свойство для раскрашивания ячеек таблицы. Таким образом, у нас не будет проблем, если полупрозрачные цвета используются в качестве фона стола.
Затем мы добавляем градиент в ячейки таблицы, background-image: linear-gradient(var(--bs-table-accent-bg), 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));

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

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

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

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

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

#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри Птица		@twitter

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

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

#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри Птица		@twitter

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

Таблицы без рамок

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

#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри Птица		@twitter

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

#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри Птица		@twitter

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

Компактные таблицы

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

#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри Птица		@twitter

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

#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри Птица		@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;`от таблицы	Nulla vitae elit libero, pharetra augue. Cras mattis Concectetur Purus Sit Amet Fermentum. Vestibulum id ligula porta felis euismod semper.
Эта ячейка наследуется `vertical-align: bottom;`от строки таблицы	Эта ячейка наследуется `vertical-align: bottom;`от строки таблицы	Эта ячейка наследуется `vertical-align: bottom;`от строки таблицы	Nulla vitae elit libero, pharetra augue. Cras mattis Concectetur Purus Sit Amet Fermentum. Vestibulum id ligula porta felis euismod semper.
Эта ячейка наследуется `vertical-align: middle;`от таблицы	Эта ячейка наследуется `vertical-align: middle;`от таблицы	Эта ячейка выровнена по верхнему краю.	Nulla vitae elit libero, pharetra augue. Cras mattis Concectetur Purus Sit Amet Fermentum. Vestibulum id ligula porta felis euismod semper.

<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

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

Первый

Последний

Ручка

отметка

Отто

@mdo

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

Ларри

птица

@twitter

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

Как работает раскрой

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

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

Анатомия

Голова стола

Подобно таблицам и темным таблицам, используйте классы-модификаторы .table-light или, .table-darkчтобы сделать <thead> светлым или темно-серым.

#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри	птица	@twitter

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

#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри	птица	@twitter

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

Ножка стола

#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри	птица	@twitter
Нижний колонтитул	Нижний колонтитул	Нижний колонтитул	Нижний колонтитул

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

Титры

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

Список пользователей
#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри Птица		@twitter

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

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

Список пользователей
#	Первый	Последний	Ручка
1	отметка	Отто	@mdo
2	Джейкоб	Торнтон	@жир
3	Ларри	птица	@twitter

<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 для горизонтальной прокрутки таблиц.

#	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок
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-striped-bg-factor, $table-active-bg-factor и $table-hover-bg-factor) используются для определения контраста в вариантах таблицы.
За исключением светлого и темного вариантов стола, цвета темы осветляются $table-bg-level переменной.

$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,
);

Bootstrap таблицы (tables)