Документация и примеры для выбора стиля таблиц (учитывая их преобладающее использование в плагинах JavaScript) с помощью Bootstrap.
Примеры
Из-за широкого использования таблиц в сторонних виджетах, таких как календари и средства выбора даты, мы разработали наши таблицы для подписки. Просто добавьте базовый класс .table к любому <table>, затем расширьте его с помощью пользовательских стилей или наших различных включенных классов модификаторов.
Используя самую простую разметку таблиц, вот как таблицы на основе .table выглядят в Bootstrap. Все стили таблиц наследуются в Bootstrap 4, что означает, что любые вложенные таблицы будут иметь тот же стиль, что и родительские.
| # |
Первый |
Последний |
Обращение |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Первый</th>
<th scope="col">Последний</th>
<th scope="col">Обращение</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Вы также можете инвертировать цвета - светлый текст на темном фоне - с помощью .table-dark.
| # |
Первый |
Последний |
Обращение |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Первый</th>
<th scope="col">Последний</th>
<th scope="col">Обращение</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Варианты заголовка таблицы
Подобно таблицам и темным таблицам, используйте классы-модификаторы .thead-light или .thead-dark, чтобы <thead> казались светлыми или темно-серыми.
| # |
Первый |
Последний |
Обращение |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
| # |
Первый |
Последний |
Обращение |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Первый</th>
<th scope="col">Последний</th>
<th scope="col">Обращение</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">Первый</th>
<th scope="col">Последний</th>
<th scope="col">Обращение</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Полосатые строки
Используйте .table-striped, чтобы добавить полосатую зебру к любой строке таблицы внутри <tbody>.
| # |
Первый |
Последний |
Обращение |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Первый</th>
<th scope="col">Последний</th>
<th scope="col">Обращение</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # |
Первый |
Последний |
Обращение |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Первый</th>
<th scope="col">Последний</th>
<th scope="col">Обращение</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Таблица с границами
Добавьте .table-bordered для границ со всех сторон таблицы и ячеек.
| # |
Первый |
Последний |
Обращение |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Ларри Птица |
@twitter |
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Первый</th>
<th scope="col">Последний</th>
<th scope="col">Обращение</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Ларри Птица</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # |
Первый |
Последний |
Обращение |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Ларри Птица |
@twitter |
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Первый</th>
<th scope="col">Последний</th>
<th scope="col">Обращение</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Ларри Птица</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Таблица без границ
Добавьте .table-borderless для таблицы без границ.
| # |
Первый |
Последний |
Обращение |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Ларри Птица |
@twitter |
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Первый</th>
<th scope="col">Последний</th>
<th scope="col">Обращение</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Ларри Птица</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
.table-borderless также может использоваться на темных таблицах.
| # |
Первый |
Последний |
Обращение |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Ларри Птица |
@twitter |
<table class="table table-borderless table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Первый</th>
<th scope="col">Последний</th>
<th scope="col">Обращение</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Ларри Птица</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Строки с наведением
Добавьте .table-hover, чтобы включить состояние наведения на строки таблицы внутри <tbody>.
| # |
Первый |
Последний |
Обращение |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Ларри Птица |
@twitter |
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Первый</th>
<th scope="col">Последний</th>
<th scope="col">Обращение</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Ларри Птица</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # |
Первый |
Последний |
Обращение |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Ларри Птица |
@twitter |
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Первый</th>
<th scope="col">Последний</th>
<th scope="col">Обращение</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Ларри Птица</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Маленькая таблица
Добавьте .table-sm, чтобы сделать таблицы более компактными, сократив заполнение ячеек пополам.
| # |
Первый |
Последний |
Обращение |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Ларри Птица |
@twitter |
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Первый</th>
<th scope="col">Последний</th>
<th scope="col">Обращение</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Ларри Птица</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # |
Первый |
Последний |
Обращение |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Ларри Птица |
@twitter |
<table class="table table-sm table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Первый</th>
<th scope="col">Последний</th>
<th scope="col">Обращение</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Ларри Птица</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Контекстные классы
Используйте контекстные классы для раскрашивания строк таблицы или отдельных ячеек.
| Класс |
Заголовок |
Заголовок |
| Активный |
Ячейка |
Ячейка |
| По умолчанию |
Ячейка |
Ячейка |
| Primary |
Ячейка |
Ячейка |
| Secondary |
Ячейка |
Ячейка |
| Success |
Ячейка |
Ячейка |
| Danger |
Ячейка |
Ячейка |
| Warning |
Ячейка |
Ячейка |
| Info |
Ячейка |
Ячейка |
| Light |
Ячейка |
Ячейка |
| Dark |
Ячейка |
Ячейка |
<!-- По строкам -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- По ячейкам (`td` или `th`) -->
<tr>
<td class="table-active">...</td>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
Обычные варианты фона таблицы недоступны для темной таблицы, однако Вы можете использовать текстовые или фоновые утилиты для достижения аналогичных стилей.
| # |
Заголовок |
Заголовок |
| 1 |
Ячейка |
Ячейка |
| 2 |
Ячейка |
Ячейка |
| 3 |
Ячейка |
Ячейка |
| 4 |
Ячейка |
Ячейка |
| 5 |
Ячейка |
Ячейка |
| 6 |
Ячейка |
Ячейка |
| 7 |
Ячейка |
Ячейка |
| 8 |
Ячейка |
Ячейка |
| 9 |
Ячейка |
Ячейка |
<!-- По строкам -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>
<!-- По ячейкам (`td` или `th`) -->
<tr>
<td class="bg-primary">...</td>
<td class="bg-success">...</td>
<td class="bg-warning">...</td>
<td class="bg-danger">...</td>
<td class="bg-info">...</td>
</tr>
Передача смысла вспомогательным технологиям
Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .sr-only.
Создайте адаптивные таблицы, заключив любой .table в .table-responsive{-sm|-md|-lg|-xl}, заставляя таблицу прокручиваться по горизонтали при каждой контрольной точке max-width до (но не включая) 576px, 768px, 992px и 1120px соответственно.
Обратите внимание: поскольку браузеры в настоящее время не поддерживают
запросы контекста диапазона, мы работаем над ограничениями
min- и max- префиксов и области просмотра с дробной шириной (что может происходить при определенных условиях, например, на устройствах с высоким разрешением) использование значений с более высокой точностью для этих сравнений.
Заголовки
<caption> действует как заголовок таблицы. Это помогает пользователям программ чтения с экрана найти таблицу, понять, о чем она, и решить, хотят ли они ее прочитать.
Список пользователей
| # |
Первый |
Последний |
Обращение |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
<table class="table">
<caption>Список пользователей</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Первый</th>
<th scope="col">Последний</th>
<th scope="col">Обращение</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Адаптивные таблицы
Адаптивные таблицы позволяют с легкостью прокручивать таблицы по горизонтали. Сделайте любую таблицу адаптивной во всех окнах просмотра, заключив в .table с .table-responsive. Или выберите максимальную контрольную точку, до которой будет реагировать таблица, используя .table-responsive{-sm|-md|-lg|-xl}.
Вертикальная обрезка/усечение
В адаптивных таблицах используется overflow-y: hidden, который обрезает любое содержимое, выходящее за пределы нижнего или верхнего края таблицы. В частности, это может вырезать раскрывающиеся меню и другие сторонние виджеты.
Всегда адаптивный
Через каждую контрольную точку используйте .table-responsive для горизонтальной прокрутки таблиц.
| # |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
| 1 |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
| 2 |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
| 3 |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Специфическая контрольная точка
Используйте .table-responsive{-sm|-md|-lg|-xl} по мере необходимости для создания адаптивных таблиц до определенной контрольной точки. С этой контрольной точки и выше таблица будет вести себя нормально и не будет прокручиваться по горизонтали.
Эти таблицы могут отображаться неработающими до тех пор, пока их адаптивные стили не будут применяться при определенной ширине области просмотра.
| # |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
| 1 |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
| 2 |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
| 3 |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
| # |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
| 1 |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
| 2 |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
| 3 |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
| # |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
| 1 |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
| 2 |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
| 3 |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
| # |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
Заголовок |
| 1 |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
| 2 |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
| 3 |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
Ячейка |
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
<div class="table-responsive-md">
<table class="table">
...
</table>
</div>
<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>
<div class="table-responsive-xl">
<table class="table">
...
</table>
</div>