Столы

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

На этой странице

Обзор

Из-за широкого использования <table>элементов в сторонних виджетах, таких как календари и средства выбора даты, таблицы Bootstrap являются опциональными . Добавьте базовый класс .tableв любой <table>, а затем добавьте наши необязательные классы-модификаторы или пользовательские стили. Все стили таблиц не наследуются в Bootstrap, что означает, что любые вложенные таблицы могут иметь стили независимо от родителя.

Используя самую простую разметку таблиц, вот как .tableтаблицы на основе - выглядят в Bootstrap.

#	Первый	Последний	Справиться
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 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	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

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

Полосатые столбцы

Используйте .table-striped-columns, чтобы добавить чередование зебры к любому столбцу таблицы.

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

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

Эти классы также могут быть добавлены к вариантам таблицы:

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

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

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

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

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

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

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

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

Hoverable ряды

Добавьте .table-hover, чтобы включить состояние наведения на строки таблицы в файле <tbody>.

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

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

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

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

Эти наводимые строки также можно комбинировать с вариантом полосатой строки:

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

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

Активные столы

Выделите строку или ячейку таблицы, добавив .table-activeкласс.

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

<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	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

<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);слоя to поверх любого указанного background-color. Поскольку мы используем огромный разброс и не размываем, цвет будет монотонным. Поскольку --bs-table-accent-bgпо умолчанию он не установлен, у нас нет тени по умолчанию.
При добавлении классов .table-striped, .table-striped-columns, .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));
    $border-color: mix($color, $background, percentage($table-border-factor));

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

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Границы таблицы

Столы с границами

Добавьте .table-borderedдля границ со всех сторон таблицы и ячеек.

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

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

Для изменения цвета можно добавить утилиты цвета границы :

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

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

Таблицы без границ

Добавить .table-borderlessдля таблицы без границ.

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

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

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

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

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

Добавьте .table-sm, чтобы сделать .tableболее компактным, разрезав всю ячейку paddingпополам.

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

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

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

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

Разделители групп таблиц

Добавьте более толстую и темную границу между группами таблиц <thead>— <tbody>, и <tfoot>— с помощью .table-group-divider. Настройте цвет, изменив border-top-color(для которого в настоящее время мы не предоставляем служебный класс).

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

HTML

<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 class="table-group-divider">
    <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>

Вертикальное выравнивание

Ячейки таблицы <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>

Вложение

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

Первый

Последний

Справиться

Отметка

Отто

@мдо

Заголовок	Заголовок	Заголовок
А	Первый	Последний
Б	Первый	Последний
С	Первый	Последний

Ларри

птица

@твиттер

<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>s светло- или темно-серыми.

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри	птица	@твиттер

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

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри	птица	@твиттер

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

Ножка стола

#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри	птица	@твиттер
Нижний колонтитул	Нижний колонтитул	Нижний колонтитул	Нижний колонтитул

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

Подписи

Функционирует <caption>как заголовок для таблицы. Это помогает пользователям программ чтения с экрана найти таблицу, понять, о чем она, и решить, хотят ли они ее прочитать.

Список пользователей
#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

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

Вы также можете поместить в <caption>верхней части таблицы с помощью .caption-top.

Список пользователей
#	Первый	Последний	Справиться
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри	птица	@твиттер

HTML

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

Адаптивные таблицы

Адаптивные таблицы позволяют с легкостью прокручивать таблицы по горизонтали. Сделайте любую таблицу отзывчивой во всех окнах просмотра, обернув файл с .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:                 var(--#{$prefix}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:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$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-scaleпеременной.