Таблиці
Документація та приклади оформлення таблиць (враховуючи їхнє поширене використання в плагінах JavaScript) за допомогою Bootstrap.
Приклади
У зв’язку з широким використанням таблиць у віджетах сторонніх розробників, таких як календарі та засоби вибору дати, ми розробили наші таблиці такими, що можна використовувати . Просто додайте базовий клас .table
до будь-якого <table>
, а потім розширте його користувацькими стилями або нашими різноманітними класами-модифікаторами.
Використовуючи найпростішу розмітку таблиць, ось як .table
виглядають таблиці на базі Bootstrap. Усі стилі таблиць успадковуються в Bootstrap 4 , тобто будь-які вкладені таблиці будуть стилізовані так само, як і батьківські.
# | Спочатку | Останній | Ручка |
---|---|---|---|
1 | Марк | Отто | @mdo |
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 | Марк | Отто | @mdo |
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>
виглядали світло- або темно-сірими.
# | Спочатку | Останній | Ручка |
---|---|---|---|
1 | Марк | Отто | @mdo |
2 | Яків | Торнтон | @жирний |
3 | Ларрі | птах |
# | Спочатку | Останній | Ручка |
---|---|---|---|
1 | Марк | Отто | @mdo |
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 | Марк | Отто | @mdo |
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 | Марк | Отто | @mdo |
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 | Марк | Отто | @mdo |
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 | Марк | Отто | @mdo |
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 | Марк | Отто | @mdo |
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 | Марк | Отто | @mdo |
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 | Марк | Отто | @mdo |
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 | Марк | Отто | @mdo |
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 | Марк | Отто | @mdo |
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 | Марк | Отто | @mdo |
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 | Марк | Отто | @mdo |
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>
Чуйні столи
Чуйні таблиці дозволяють легко прокручувати таблиці горизонтально. Зробіть будь-яку таблицю адаптивною для всіх вікон перегляду, обернувши a .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>