Таблицы

Обзор

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

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

<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">Имя</th><thscope="col">Фамилия</th><thscope="col">Обращение</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>

Варианты

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

<!-- На таблицах --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- На строках --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- На ячейках (`td` или `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>

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

Разделенные «полосами» ряды

Добавьте класс .table-striped к <tbody> для разделения «полосками зебры» рядов таблицы.

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

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

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

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

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

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

<tableclass="table table-dark table-striped-columns"> ...
</table>

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

<tableclass="table table-success table-striped-columns"> ...
</table>

Ряды с :hover (отзывчивость при наведении)

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

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

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

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

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

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

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

<tableclass="table"><thead> ...
</thead><tbody><trclass="table-active"> ...
</tr><tr> ...
</tr><tr><thscope="row">3</th><tdcolspan="2"class="table-active">Larry the Bird</td><td>@twitter</td></tr></tbody></table>

<tableclass="table table-dark"><thead> ...
</thead><tbody><trclass="table-active"> ...
</tr><tr> ...
</tr><tr><thscope="row">3</th><tdcolspan="2"class="table-active">Larry the Bird</td><td>@twitter</td></tr></tbody></table>

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

Для акцентированные таблиц (разделенных «полосами» рядов, рядов с :hover и активных таблиц) мы использовали следующие методы для эффективной работы всех наших контекстуальных классов:

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

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

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

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

Таблица без отображения границ

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

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

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

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

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

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

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

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

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

<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">Первый</th><thscope="col">Последний</th><thscope="col">Обработчик</th></tr></thead><tbodyclass="table-group-divider"><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>

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

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

<divclass="table-responsive"><tableclass="table align-middle"><thead><tr> ...
</tr></thead><tbody><tr> ...
</tr><trclass="align-bottom"> ...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">Эта ячейка выровнена по верхнему краю.</td><td>...</td></tr></tbody></table></div>

Вложенность

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

<tableclass="table table-striped"><thead> ...
</thead><tbody> ...
<tr><tdcolspan="4"><tableclass="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> казались светлыми или темно-серыми.

<tableclass="table"><theadclass="table-light"> ...
</thead><tbody> ...
</tbody></table>

<tableclass="table"><theadclass="table-dark"> ...
</thead><tbody> ...
</tbody></table>

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

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

Подписи таблицы

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

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

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

<tableclass="table caption-top"><caption>Список пользователей</caption><thead><tr><thscope="col">#</th><thscope="col">Первый</th><thscope="col">Последний</th><thscope="col">Обработчик</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>

Адаптивные таблицы

Адаптивные («отзывчивые») таблицы позволяют таблицам прокручиваться горизонтально. Сделайте любую таблицу таковой для всех экранов и девайсов, добавив класс .table-responsive в класс .table. Или укажите максимальный брейкпойнт, на котором появится данное свойство таблицы, добавив класс .table-responsive{-sm|-md|-lg|-xl|-xxl}.

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

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

<divclass="table-responsive"><tableclass="table"> ...
</table></div>

Специфика контрольных точек

Используйте .table-responsive{-sm|-md|-lg|-xl|-xxl} когда необходимо создать адаптивные таблицы до определенной брейкпойнта. До этого значения таблицы будут вести себя как обычные таблицы и не будут прокручиваться горизонтально.

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

xs:

sm:

md:

lg:

#	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок
1	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
2	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
3	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка

xl:

xxl:

<divclass="table-responsive"><tableclass="table"> ...
</table></div><divclass="table-responsive-sm"><tableclass="table"> ...
</table></div><divclass="table-responsive-md"><tableclass="table"> ...
</table></div><divclass="table-responsive-lg"><tableclass="table"> ...
</table></div><divclass="table-responsive-xl"><tableclass="table"> ...
</table></div><divclass="table-responsive-xxl"><tableclass="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.