Таблицы
Документация и примеры для добавления стилей для таблиц (учитывая их распространённое использование в JavaScript-плагинах) с помощью Bootstrap.
Примеры
Из-за широкого использования таблиц в сторонних виджетах, таких как календари и выборщики дат, наши таблицы разработаны как дополнительные. Просто добавьте базовый класс .table к любому <table>, а затем расширьте его с помощью пользовательских стилей или различных включённых модификаторов.
Используя самый базовый разметку таблиц, вот как таблицы, основанные на .table, выглядят в Bootstrap. Все стили таблиц наследуются в Bootstrap 4, что означает, что любые вложенные таблицы будут стилизованы так же, как и родительская.
<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.
<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> выглядели светло- или тёмно-серыми.
<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>.
<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> <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 для границ со всех сторон таблицы и ячеек.
<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> <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 для таблицы без границ.
<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 также можно использовать в тёмных таблицах.
<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>.
<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> <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 для уменьшения размеров таблиц за счёт уменьшения отступов ячеек вдвое.
<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> <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>
Стандартные варианты фона таблиц недоступны для тёмной таблицы, однако вы можете использовать утилиты текста или фона для достижения аналогичных стилей.
<!-- 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 прерывании до (но не включая) 576px, 768px, 992px и 1120px соответственно.
Обратите внимание, что, поскольку браузеры в настоящее время не поддерживают контексты запросов диапазона, мы обходим ограничения min- и max- префиксов и окон просмотра с дробными ширинами (что может произойти в определенных условиях на устройствах с высокой плотностью пикселей, например) путём использования значений с большей точностью для этих сравнений.
Подписи
<caption> выполняет функцию заголовка для таблицы. Она помогает пользователям программ чтения с экрана найти таблицу, понять, о чем она, и решить, стоит ли её читать.
<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 для горизонтальной прокрутки таблиц.
<div class="table-responsive">
<table class="table">
...
</table>
</div> Конкретные прерывания
Используйте .table-responsive{-sm|-md|-lg|-xl} по мере необходимости, чтобы создать адаптивные таблицы до определённого прерывания. От этого прерывания и выше таблица будет вести себя обычно и не будет прокручиваться по горизонтали.
Эти таблицы могут выглядеть сломанными, пока их адаптивные стили не применятся при определённых ширинах окна просмотра.
<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>
© 2011–2020 Twitter, Inc.
© 2011–2020 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/4.5/content/tables/
