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>