Source

Таблиці

Документація та приклади оформлення таблиць (враховуючи їхнє поширене використання в плагінах JavaScript) за допомогою Bootstrap.

Приклади

У зв’язку з широким використанням таблиць у віджетах сторонніх розробників, таких як календарі та засоби вибору дати, ми розробили наші таблиці такими, що можна використовувати . Просто додайте базовий клас .tableдо будь-якого <table>, а потім розширте його користувацькими стилями або нашими різноманітними класами-модифікаторами.

Використовуючи найпростішу розмітку таблиць, ось як .tableвиглядають таблиці на базі Bootstrap. Усі стилі таблиць успадковуються в Bootstrap 4 , тобто будь-які вкладені таблиці будуть стилізовані так само, як і батьківські.

# Спочатку Останній Ручка
1 Марк Отто @mdo
2 Яків Торнтон @жирний
3 Ларрі птах @twitter 
<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 Ларрі птах @twitter 
<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 Ларрі птах @twitter
# Спочатку Останній Ручка
1 Марк Отто @mdo
2 Яків Торнтон @жирний
3 Ларрі птах @twitter 
<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 Ларрі птах @twitter 
<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 Ларрі птах @twitter 
<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 Пташка Ларрі @twitter 
<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 Пташка Ларрі @twitter 
<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 Пташка Ларрі @twitter 
<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 Пташка Ларрі @twitter 
<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 Пташка Ларрі @twitter 
<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 Пташка Ларрі @twitter 
<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 Пташка Ларрі @twitter 
<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 Пташка Ларрі @twitter 
<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-та вікна перегляду з дробовою шириною (що може виникнути за певних умов, наприклад, на пристроях з високою роздільною здатністю), використовуючи для цих порівнянь значення з вищою точністю. .

Підписи

A <caption>функціонує як заголовок для таблиці. Це допомагає користувачам із програмами зчитування з екрана знайти таблицю, зрозуміти, про що йдеться, і вирішити, чи хочуть вони її прочитати.

Список користувачів
# Спочатку Останній Ручка
1 Марк Отто @mdo
2 Яків Торнтон @жирний
3 Ларрі птах @twitter 
<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>