Таблиці

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

На цій сторінці

Огляд

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

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

#	Спочатку	Останній	Ручка
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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Варіанти

Використовуйте контекстні класи для розфарбовування таблиць, рядків таблиць або окремих клітинок.

Клас	Заголовок	Заголовок
За замовчуванням	Стільниковий	Стільниковий
Первинний	Стільниковий	Стільниковий
Вторинний	Стільниковий	Стільниковий
Успіх	Стільниковий	Стільниковий
Небезпека	Стільниковий	Стільниковий
УВАГА	Стільниковий	Стільниковий
Інформація	Стільниковий	Стільниковий
світло	Стільниковий	Стільниковий
Темний	Стільниковий	Стільниковий

<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>

Передача значення допоміжним технологіям

Використання кольору для додання значення забезпечує лише візуальну індикацію, яка не буде передана користувачам допоміжних технологій, таких як програми зчитування з екрана. Переконайтеся, що інформація, позначена кольором, або очевидна з самого вмісту (наприклад, видимого тексту), або включена за допомогою альтернативних засобів, таких як додатковий текст, прихований разом із .visually-hiddenкласом.

Акцентні столи

Смугасті ряди

Використовуйте .table-stripedдля додавання смуг зебри до будь-якого рядка таблиці в <tbody>.

#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class="table table-striped">
  ...
</table>

Ці класи також можна додати до варіантів таблиці:

#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class="table table-dark table-striped">
  ...
</table>

#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class="table table-success table-striped">
  ...
</table>

Нависаючі ряди

Додайте .table-hover, щоб увімкнути стан наведення курсора на рядки таблиці в межах <tbody>.

#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class="table table-hover">
  ...
</table>

#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class="table table-dark table-hover">
  ...
</table>

Ці ширяючі ряди також можна поєднувати з смугастим варіантом:

#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class="table table-striped table-hover">
  ...
</table>

Активні таблиці

Виділіть рядок або клітинку таблиці, додавши .table-activeклас.

#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Як працюють варіанти та таблиці акцентів?

Для таблиць із акцентами ( смугасті рядки , рядки з наведенням курсору та активні таблиці ) ми використали деякі прийоми, щоб ці ефекти працювали для всіх наших варіантів таблиць :

Ми починаємо з встановлення фону клітинки таблиці за допомогою --bs-table-bgспеціальної властивості. Потім усі варіанти таблиці встановлюють цю спеціальну властивість, щоб розфарбувати клітинки таблиці. Таким чином, ми не матимемо проблем, якщо напівпрозорі кольори використовуються як фон таблиці.
Потім ми додаємо тінь вставного поля до клітинок таблиці за допомогою box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);шару поверх будь-якого вказаного background-color. Оскільки ми використовуємо великий розкид і відсутність розмиття, колір буде монотонним. Оскільки --bs-table-accent-bgза замовчуванням не встановлено, ми не маємо тіні вікна за замовчуванням.
Якщо додано класи або .table-striped, для розфарбовування фону встановлюється напівпрозорий колір..table-hover.table-active--bs-table-accent-bg
Для кожного варіанту таблиці ми створюємо --bs-table-accent-bgколір із найвищим контрастом залежно від цього кольору. Наприклад, колір акценту .table-primaryтемніший, а .table-darkколір акценту – світліший.
Кольори тексту та рамки генеруються однаково, і їхні кольори успадковуються за замовчуванням.

За кадром це виглядає так:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Межі таблиці

Облямовані столи

Додайте .table-borderedдля меж з усіх боків таблиці та комірок.

#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class="table table-bordered">
  ...
</table>

Для зміни кольорів можна додати утиліти кольору рамки :

#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class="table table-bordered border-primary">
  ...
</table>

Столи без бордюрів

Додайте .table-borderlessдля таблиці без рамок.

#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class="table table-borderless">
  ...
</table>

#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class="table table-dark table-borderless">
  ...
</table>

Маленькі столики

Додайте .table-sm, щоб зробити .tableбільш компактним, розрізавши всю комірку paddingнавпіл.

#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class="table table-sm">
  ...
</table>

#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class="table table-dark table-sm">
  ...
</table>

Вертикальне вирівнювання

Комірки таблиці <thead>завжди вертикально вирівняні донизу. Комірки таблиці <tbody>успадковують своє вирівнювання від <table>і за замовчуванням вирівнюються вгорі. Використовуйте класи вертикального вирівнювання , щоб повторно вирівняти, де це необхідно.

Заголовок 1	Заголовок 2	Заголовок 3	Заголовок 4
Ця комірка успадковується `vertical-align: middle;`від таблиці	Ця комірка успадковується `vertical-align: middle;`від таблиці	Ця комірка успадковується `vertical-align: middle;`від таблиці	Це деякий текст-заповнювач, призначений для того, щоб зайняти трохи вертикального простору, щоб продемонструвати, як працює вертикальне вирівнювання в попередніх клітинках.
Ця комірка успадковується `vertical-align: bottom;`від рядка таблиці	Ця комірка успадковується `vertical-align: bottom;`від рядка таблиці	Ця комірка успадковується `vertical-align: bottom;`від рядка таблиці	Це деякий текст-заповнювач, призначений для того, щоб зайняти трохи вертикального простору, щоб продемонструвати, як працює вертикальне вирівнювання в попередніх клітинках.
Ця комірка успадковується `vertical-align: middle;`від таблиці	Ця комірка успадковується `vertical-align: middle;`від таблиці	Ця комірка вирівнюється вгорі.	Це деякий текст-заповнювач, призначений для того, щоб зайняти трохи вертикального простору, щоб продемонструвати, як працює вертикальне вирівнювання в попередніх клітинках.

<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Гніздування

Стилі меж, активні стилі та варіанти таблиць не успадковуються вкладеними таблицями.

Спочатку

Останній

Ручка

Марк

Отто

@mdo

Заголовок	Заголовок	Заголовок
А	Спочатку	Останній
Б	Спочатку	Останній
C	Спочатку	Останній

Ларрі

птах

@twitter

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Як працює вкладення

Щоб запобігти витоку будь-яких> стилів у вкладені таблиці, ми використовуємо селектор дочірнього комбінатора ( ) у нашому CSS. Оскільки нам потрібно націлити всі tds і ths у thead, tbody, і tfoot, наш селектор виглядав би досить довгим без нього. Таким чином, ми використовуємо досить дивний .table > :not(caption) > * > *селектор для націлювання на всі tds і ths .table, але не на будь-яку потенційно вкладену таблицю.

Зауважте, що якщо ви додаєте <tr>s як прямі дочірні елементи таблиці, вони <tr>будуть загорнуті в a <tbody>за замовчуванням, таким чином наші селектори працюватимуть належним чином.

Анатомія

Голова столу

Подібно до таблиць і темних таблиць, використовуйте класи-модифікатори .table-lightабо .table-dark, щоб вони <thead>виглядали світло- або темно-сірими.

#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Ларрі	птах	@twitter

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Ларрі	птах	@twitter

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Ніжка столу

#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Ларрі	птах	@twitter
нижній колонтитул	нижній колонтитул	нижній колонтитул	нижній колонтитул

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Підписи

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

Список користувачів
#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Ви також можете розмістити <caption>на вершині таблиці за допомогою .caption-top.

Список користувачів
#	Спочатку	Останній	Ручка
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Ларрі	птах	@twitter

<table class="table caption-top">
  <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|-xxl}.

Вертикальне обрізання/обрізання

У адаптивних таблицях використовується функція overflow-y: hidden, яка відсікає будь-який вміст, що виходить за межі нижнього або верхнього краю таблиці. Зокрема, це може відрізати спадні меню та інші сторонні віджети.

Завжди чуйний

Через кожну точку розриву використовуйте .table-responsiveдля горизонтального прокручування таблиць.

#	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок
1	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий
2	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий
3	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Специфічна точка зупину

Використовуйте .table-responsive{-sm|-md|-lg|-xl|-xxl}за потреби для створення адаптивних таблиць до певної точки зупину. Від цієї точки зупинки та вище таблиця працюватиме нормально й не прокручуватиметься горизонтально.

Ці таблиці можуть виглядати зламаними, доки їхні адаптивні стилі не будуть застосовані до певної ширини вікна перегляду.

#	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок
1	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий
2	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий
3	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий

#	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок
1	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий
2	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий
3	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий

#	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок
1	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий
2	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий
3	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий

#	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок
1	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий
2	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий
3	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий

#	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок
1	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий
2	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий
3	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий

#	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок
1	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий
2	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий
3	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий	Стільниковий

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

<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>

<div class="table-responsive-xxl">
  <table class="table">
    ...
  </table>
</div>

Сасс

Змінні

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Петля

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Налаштування

Факторні змінні ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) використовуються для визначення контрасту у варіантах таблиці.
Окрім світлих і темних варіантів таблиці, кольори теми освітлюються $table-bg-levelзмінною.