Bootstrap 4 таблицы
Базовая таблица Bootstrap 4
Базовая таблица Bootstrap 4 имеет легкие отступы и горизонтальные разделители.
Класс .tableдобавляет к таблице базовые стили:
Пример
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Полосатые ряды
Класс .table-stripedдобавляет полоски зебры в таблицу:
Пример
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Стол с рамкой
Класс .table-borderedдобавляет границы со всех сторон таблицы и ячеек:
Пример
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Наведите строки
Класс .table-hoverдобавляет эффект наведения (серый цвет фона) на строки таблицы:
Пример
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Черный/темный стол
Класс .table-darkдобавляет к таблице черный фон:
Пример
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Стол в темную полоску
Объедините .table-darkи .table-striped, чтобы создать темный полосатый стол:
Пример
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Парящий темный стол
Класс .table-hoverдобавляет эффект наведения (серый цвет фона) на строки таблицы:
Пример
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Стол без полей
Класс .table-borderlessудаляет границы из таблицы:
Пример
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Контекстные классы
Контекстные классы можно использовать для окрашивания всей таблицы ( <table>), строк таблицы ( <tr>) или ячеек таблицы ( <td>).
Пример
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | [email protected] |
| Primary | Joe | [email protected] |
| Success | Doe | [email protected] |
| Danger | Moe | [email protected] |
| Info | Dooley | [email protected] |
| Warning | Refs | [email protected] |
| Active | Activeson | [email protected] |
| Secondary | Secondson | [email protected] |
| Light | Angie | [email protected] |
| Dark | Bo | [email protected] |
Можно использовать следующие контекстные классы:
| Класс | Описание |
|---|---|
.table-primary |
Синий: указывает на важное действие |
.table-success |
Зеленый: указывает на успешное или положительное действие. |
.table-danger |
Красный: указывает на опасное или потенциально негативное действие. |
.table-info |
Светло-синий: указывает на нейтральное информативное изменение или действие. |
.table-warning |
Оранжевый: указывает на предупреждение, которое может потребовать внимания. |
.table-active |
Серый: применяет цвет при наведении к строке или ячейке таблицы. |
.table-secondary |
Серый: указывает на чуть менее важное действие. |
.table-light |
Светло-серый фон таблицы или строки таблицы |
.table-dark |
Темно-серый фон таблицы или строки таблицы |
Цвета головы стола
Класс .thead-darkдобавляет черный фон к заголовкам таблиц, а .thead-lightкласс добавляет серый фон к заголовкам таблиц:
Пример
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Маленький стол
Класс .table-smуменьшает размер таблицы, сокращая отступы ячеек вдвое:
Пример
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Адаптивные таблицы
Класс .table-responsiveдобавляет к таблице полосу прокрутки, когда это необходимо (когда она слишком велика по горизонтали):
Пример
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Вы также можете решить, когда таблица должна получить полосу прокрутки, в зависимости от ширины экрана:
| Класс | Ширина экрана |
|---|---|
.table-responsive-sm |
< 576 пикселей |
.table-responsive-md |
< 768 пикселей |
.table-responsive-lg |
< 992 пикселей |
.table-responsive-xl |
< 1200 пикселей |
Пример
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>