Столы
Документация и примеры оформления таблиц (учитывая их широкое использование в плагинах JavaScript) с помощью Bootstrap.
В связи с тем, что таблицы широко используются в сторонних виджетах, таких как календари и средства выбора даты, мы разработали наши таблицы так, чтобы их можно было включить . Просто добавьте базовый класс .table
к любому <table>
, а затем дополните его пользовательскими стилями или нашими различными включенными классами-модификаторами.
Используя самую простую разметку таблиц, вот как .table
таблицы на основе - выглядят в Bootstrap. Все стили таблиц наследуются в Bootstrap 4 , что означает, что любые вложенные таблицы будут стилизованы так же, как и родительские.
# | Первый | Последний | Справиться |
---|---|---|---|
1 | Отметка | Отто | @мдо |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри | птица | @твиттер |
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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 | Отметка | Отто | @мдо |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри | птица | @твиттер |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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>
s светло- или темно-серыми.
# | Первый | Последний | Справиться |
---|---|---|---|
1 | Отметка | Отто | @мдо |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри | птица | @твиттер |
# | Первый | Последний | Справиться |
---|---|---|---|
1 | Отметка | Отто | @мдо |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри | птица | @твиттер |
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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 | Отметка | Отто | @мдо |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри | птица | @твиттер |
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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 | Отметка | Отто | @мдо |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри | птица | @твиттер |
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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 | Отметка | Отто | @мдо |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри Птица | @твиттер |
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | Первый | Последний | Справиться |
---|---|---|---|
1 | Отметка | Отто | @мдо |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри Птица | @твиттер |
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Добавьте .table-borderless
для таблицы без границ.
# | Первый | Последний | Справиться |
---|---|---|---|
1 | Отметка | Отто | @мдо |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри Птица | @твиттер |
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
.table-borderless
также можно использовать на темных столах.
# | Первый | Последний | Справиться |
---|---|---|---|
1 | Отметка | Отто | @мдо |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри Птица | @твиттер |
<table class="table table-borderless table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Добавьте .table-hover
, чтобы включить состояние наведения на строки таблицы в файле <tbody>
.
# | Первый | Последний | Справиться |
---|---|---|---|
1 | Отметка | Отто | @мдо |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри Птица | @твиттер |
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | Первый | Последний | Справиться |
---|---|---|---|
1 | Отметка | Отто | @мдо |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри Птица | @твиттер |
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Добавьте .table-sm
, чтобы сделать таблицы более компактными, сократив отступы ячеек вдвое.
# | Первый | Последний | Справиться |
---|---|---|---|
1 | Отметка | Отто | @мдо |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри Птица | @твиттер |
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | Первый | Последний | Справиться |
---|---|---|---|
1 | Отметка | Отто | @мдо |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри Птица | @твиттер |
<table class="table table-sm table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Используйте контекстные классы для окрашивания строк таблицы или отдельных ячеек.
Учебный класс | Заголовок | Заголовок |
---|---|---|
Активный | Клетка | Клетка |
По умолчанию | Клетка | Клетка |
Начальный | Клетка | Клетка |
Среднее | Клетка | Клетка |
Успех | Клетка | Клетка |
Опасность | Клетка | Клетка |
Предупреждение | Клетка | Клетка |
Информация | Клетка | Клетка |
Легкий | Клетка | Клетка |
Темный | Клетка | Клетка |
<!-- On rows -->
<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>
<!-- On cells (`td` or `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 | Клетка | Клетка |
<!-- On rows -->
<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>
<!-- On cells (`td` or `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
контрольной точке до (но не включая) 576 пикселей, 768 пикселей, 992 пикселей и 1120 пикселей соответственно.
Обратите внимание, что поскольку браузеры в настоящее время не поддерживают контекстные запросы диапазона , мы обходим ограничения min-
и max-
префиксы и области просмотра с дробной шириной (что может произойти при определенных условиях, например, на устройствах с высоким разрешением), используя значения с более высокой точностью для этих сравнений. .
Функционирует <caption>
как заголовок для таблицы. Это помогает пользователям программ чтения с экрана найти таблицу, понять, о чем она, и решить, хотят ли они ее прочитать.
# | Первый | Последний | Справиться |
---|---|---|---|
1 | Отметка | Отто | @мдо |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри | птица | @твиттер |
<table class="table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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 | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка |
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
# | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок |
---|---|---|---|---|---|---|---|---|
1 | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка |
2 | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка |
3 | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка |
<div class="table-responsive-md">
<table class="table">
...
</table>
</div>
# | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок |
---|---|---|---|---|---|---|---|---|
1 | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка |
2 | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка |
3 | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка |
<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>
# | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок |
---|---|---|---|---|---|---|---|---|
1 | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка |
2 | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка |
3 | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка | Клетка |
<div class="table-responsive-xl">
<table class="table">
...
</table>
</div>