Bootstrap 4 Tables таблицы
Базовая таблица Bootstrap 4
Базовая загрузочная таблица 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 класс создает адаптивную таблицу: горизонтальная полоса прокрутки добавляется к таблице на экранах, которые меньше, чем 992пкс Wide (при необходимости). При просмотре на что-либо больше, чем 992пкс широкий, нет никакой разницы:
Пример
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Вы также можете решить, когда таблица должна получить полосу прокрутки, в зависимости от ширины экрана:
| Класс | Ширина экрана |
|---|---|
.table-responsive-sm |
< 576px |
.table-responsive-md |
< 768px |
.table-responsive-lg |
< 992px |
.table-responsive-xl |
< 1200px |
Пример
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>