Таблицы в Bootstrap 5

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

Кроме того, стили таблиц Bootstrap не наследуются, то есть вложенные таблицы могут быть оформлены независимо от родительской.

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

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

Тёмная таблица

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

<table class="table table-dark"> <thead> <tr> <th>Шапка 1</th> <th>Шапка 2</th> <th>Шапка 3</th> </tr> </thead> <tfoot> <tr> <th>Подвал 1</th> <th>Подвал 2</th> <th>Подвал 3</th> </tr> </tfoot> <tbody> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> </tbody> </table>

Таблица с рамками

Для создания всех рамок вокруг таблицы используйте класс .table-bordered (сохраняя при этом класс .table).

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

Чтобы добиться эффекта «наведения», когда курсор оказывается на строке таблицы, используйте класс .table-hover (сохранив при этом класс .table).

Маленькая/компактная таблица

Если вы обнаружили, что таблица имеет слишком большое значение padding, вы можете уменьшить его вдвое, используя класс .table-sm (сохранив при этом класс .table).

Контекстные классы

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

Имеется пять контекстных классов: .table-active, .table-success, .table-info, .table-warning и .table-danger.

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

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

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

Чтобы создать адаптивную таблицу, заключите ее в элемент <div>, к которому добавлен класс .table-response (или один из классов .table-response-*).

Классы .table-response-* можно использовать для указания определённой контрольной точки. Это .table-responsive-sm, .table-responsive-md, .table-responsive-lg, .table-responsive-xl и .table-responsive-xxl.

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