Cмотреть на GitHub

Таблицы

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

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

Обзор

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

Вот так таблицы, основанные на классе .table, выглядят в базовой разметке таблиц в Bootstrap.

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Обращение</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>

Варианты

Используйте их для раскраски рядов или отдельных ячеек таблицы.

Class	Заголовок	Заголовок
По умолчанию (Default)	Ячейка	Ячейка
Главный (Primary)	Ячейка	Ячейка
Второстепенный (Secondary)	Ячейка	Ячейка
Успех (Success)	Ячейка	Ячейка
Опасность (Danger)	Ячейка	Ячейка
Предупреждение (Warning)	Ячейка	Ячейка
Предупреждение (Info)	Ячейка	Ячейка
Светлый (Light)	Ячейка	Ячейка
Темный (Dark)	Ячейка	Ячейка

<!-- На таблицах -->
<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>

<!-- На строках -->
<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>

<!-- На ячейках (`td` или `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	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

Полосатые колонки

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

Ряды с :hover (отзывчивость при наведении)

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

Активные таблицы

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

#	Первый	Последний	Обработчик
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@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	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@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>

Как работают варианты и акцентированные таблицы?

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

Мы начинаем с установки фона ячейки таблицы с помощью настраиваемого свойства --bs-table-bg. Затем все варианты таблицы устанавливают это настраиваемое свойство для раскрашивания ячеек таблицы. Таким образом, у нас не будет проблем, если полупрозрачные цвета используются в качестве фона стола.
Затем мы добавляем тень вставки на ячейки таблицы с помощью box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); на слой поверх любого указанного 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));
    $table-border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$table-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	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

Таблица без отображения границ

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

Маленькие таблицы

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

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

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

#	Первый	Последний	Обработчик
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

html

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Первый</th>
      <th scope="col">Последний</th>
      <th scope="col">Обработчик</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">Эта ячейка выровнена по верхнему краю.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Вложенность

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

Первый

Последний

Обработчик

Mark

Otto

@mdo

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

Larry

the Bird

@twitter

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

Как работает вложение

Чтобы предотвратить попадание каких-либо стилей во вложенные таблицы, мы используем селектор дочернего комбинатора (>) в нашем CSS. Поскольку нам нужно настроить таргетинг на все td и th в thead, tbody и tfoot, наш селектор без него выглядел бы довольно длинным. Таким образом, мы используем немного странно выглядящий селектор .table > :not(caption) > * > * для таргетинга на все td и th в .table, но без воздействия ни на одну из потенциально вложенных таблиц.

Обратите внимание, что если вы добавите <tr> в качестве прямых дочерних элементов таблицы, <tr> по умолчанию будут заключены в <tbody>, таким образом, наши селекторы будут работать так, как задумано.

Подробный разбор

Верхний колонтитул таблицы

Подобно таблицам и темным таблицам, используйте классы-модификаторы .table-light или .table-dark чтобы <thead> казались светлыми или темно-серыми.

#	Первый	Последний	Обработчик
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

#	Первый	Последний	Обработчик
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Нижний колонтитул таблицы

#	Первый	Последний	Обработчик
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
Подвал	Подвал	Подвал	Подвал

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

Подписи таблицы

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

Список пользователей
#	Имя	Фамилия	Обращение
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-sm">
  <caption>Список пользователей</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

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

Список пользователей
#	Первый	Последний	Обработчик
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

html

<table class="table caption-top">
  <caption>Список пользователей</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Первый</th>
      <th scope="col">Последний</th>
      <th scope="col">Обработчик</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-responsive в класс .table. Или укажите максимальный брейкпойнт, на котором появится данное свойство таблицы, добавив класс .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} когда необходимо создать адаптивные таблицы до определенной брейкпойнта. До этого значения таблицы будут вести себя как обычные таблицы и не будут прокручиваться горизонтально.

Эти таблицы могут выглядеть неработающими, пока их адаптивные стили не будут автоматически применены при определенной ширине области просмотра.

xs:

#	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок
1	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
2	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
3	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка

sm:

#	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок
1	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
2	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
3	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка

md:

#	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок
1	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
2	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
3	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка

lg:

# Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок

1 Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка

2 Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка

3 Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка

xl:

#	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок
1	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
2	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
3	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка

xxl:

#	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок
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>

Sass

Переменные

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