Из-за широкого распространения таблиц в сторонних виджетах, таких как календари и «напоминалки», мы сделали так, что таблицы подключаются по согласию пользователя. Просто добавьте базовый класс .table в любой <table>, затем расширьте стилизацию за счет наших обычных классов, либо классов-модификаторов.
Вот так таблицы, основанные на классе .table, выглядят в базовой разметке таблиц в Bootstrap. Все стили таблиц в BS4 наследуются, что означает, что вложенные таблицы будут стилизованы как родительские.
Добавьте класс .table-bordered в <table> для создания границ ячеек и таблицы со всех сторон.
#
Имя
Фамилия
Username
1
Mark
Otto
@mdo
2
Mark
Otto
@TwBootstrap
3
Jacob
Thornton
@fat
4
Larry the Bird
@twitter
<tableclass="table table-bordered"><thead><tr><thscope="col">#</th><thscope="col">Имя</th><thscope="col">Фамилия</th><thscope="col">Username</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>Mark</td><td>Otto</td><td>@TwBootstrap</td></tr><tr><thscope="row">3</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">4</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
#
Имя
Фамилия
Username
1
Mark
Otto
@mdo
2
Mark
Otto
@TwBootstrap
3
Jacob
Thornton
@fat
4
Larry the Bird
@twitter
<tableclass="table table-bordered table-dark"><thead><tr><thscope="col">#</th><thscope="col">Имя</th><thscope="col">Фамилия</th><thscope="col">Username</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>Mark</td><td>Otto</td><td>@TwBootstrap</td></tr><tr><thscope="row">3</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">4</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Ряды с :hover
Добавьте класс .table-hover в <tbody> для активации :hover у рядов таблицы.
#
Имя
Фамилия
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<tableclass="table table-hover"><thead><tr><thscope="col">#</th><thscope="col">Имя</th><thscope="col">Фамилия</th><thscope="col">Username</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>
#
Имя
Фамилия
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<tableclass="table table-hover table-dark"><thead><tr><thscope="col">#</th><thscope="col">Имя</th><thscope="col">Фамилия</th><thscope="col">Username</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>
Маленькие таблицы
Добавьте класс .table-sm чтобы сделать таблицы компактнее урезанием паддинга ячкейки на 50%.
#
Имя
Фамилия
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<tableclass="table table-sm"><thead><tr><thscope="col">#</th><thscope="col">Имя</th><thscope="col">Фамилия</th><thscope="col">Username</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>
#
Имя
Фамилия
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<tableclass="table table-sm table-dark"><thead><tr><thscope="col">#</th><thscope="col">Имя</th><thscope="col">Фамилия</th><thscope="col">Username</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>
Контекстуальные классы
Используйте их для раскраски рядов или отдельных ячеек таблицы.
Type
Заголовок колонки
Заголовок колонки
Активный (Active)
Ячейка
Ячейка
По умолчанию (Default)
Ячейка
Ячейка
Главный (Primary)
Ячейка
Ячейка
Второстепенный (Secondary)
Ячейка
Ячейка
Успех (Success)
Ячейка
Ячейка
Опасность (Danger)
Ячейка
Ячейка
Предупреждение (Warning)
Ячейка
Ячейка
Предупреждение (Info)
Ячейка
Ячейка
Светлый (Light)
Ячейка
Ячейка
Темный (Dark)
Ячейка
Ячейка
<!-- On rows --><trclass="table-active">...</tr><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><!-- On cells (`td` or `th`) --><tr><tdclass="table-active">...</td><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>
Варианты бэкграудна обычных таблиц недоступны с темной таблицей, но мы можете использовать текстовые или бэкграундные утилиты для достижения подобных стилей.
#
Заголовок колонки
Заголовок колонки
1
Ячейка
Ячейка
2
Ячейка
Ячейка
3
Ячейка
Ячейка
4
Ячейка
Ячейка
5
Ячейка
Ячейка
6
Ячейка
Ячейка
7
Ячейка
Ячейка
8
Ячейка
Ячейка
9
Ячейка
Ячейка
<!-- On rows --><trclass="bg-primary">...</tr><trclass="bg-success">...</tr><trclass="bg-warning">...</tr><trclass="bg-danger">...</tr><trclass="bg-info">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="bg-primary">...</td><tdclass="bg-success">...</td><tdclass="bg-warning">...</td><tdclass="bg-danger">...</td><tdclass="bg-info">...</td></tr>
Добавление информативности для технологии для инвалидов
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей ассистивных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.
Создавайте гибкие таблицы, обертывая любой .table с .table-responsive{-sm|-md|-lg|-xl}, заставляя таблицу прокручиваться горизонтально в каждой контрольной точке max-width получат ширину 575.99px, 767.99px, 991.99px и 1119.99 px, соответственно.
Обратите внимание, что поскольку браузеры в настоящее время не поддерживают запросы диапазона, мы используем ограничения минимальных min- и максимальных max- префиксов и видовых экранов с дробной шириной (что может произойти при определенных условиях на устройствах с высоким разрешением на дюйм, например), используя значения с более высоким точность для этих сравнений.
Надписи
Тэг <caption> - это нечто похожее на заголовок для таблицы. Он помогает пользователям программ для чтения с экрана обнаружить таблицу, оценить ее содержимое и ее ценность для чтения.
«Отзывчивые» таблицы позволяют таблицам прокручиваться горизонтально. Сделайте любую таблицу таковой для всех экранов и девайсов, добавив класс .table-responsive в класс .table. Или укажите максимальный брейкпойнт, на котором появится данное свойство таблицы, добавив класс .table-responsive{-sm|-md|-lg|-xl}.
Вертикальное обрезание/сокращение
«Отзывчивые» таблицы используют overflow-y: hidden, что «обрезает» любой контент, который существует ниже конца верхних краев таблицы. В частности, это может «срезать» выпадающие меню и другие сторонние виджеты.
Всегда «отзывчиво»
Через каждую контрольную точку используйте .table-responsive для горизонтально прокручиваемых таблиц.
Используйте класс .table-responsive{-sm|-md|-lg|-xl} когда необходимо создать отзывчивые до необходимого брейкпойнта таблицы. От него и выше таблицы будут вести себя как обычные таблицы и не будут прокручиваться горизонтально.
