Перейти к основному контенту Перейти к навигации документации
Просмотреть на GitHub

Таблицы

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

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

Обзор

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

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

# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

Варианты

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

Внимание! Из-за более сложного CSS, используемого для генерации наших вариантов таблиц, они, скорее всего, не увидят адаптивную стилизацию цветового режима до v6.

ClassHeadingHeading
DefaultCellCell
PrimaryCellCell
SecondaryCellCell
SuccessCellCell
DangerCellCell
WarningCellCell
InfoCellCell
LightCellCell
DarkCellCell
<!-- 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 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-striped">
  ...
</table>

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

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

# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-striped-columns">
  ...
</table>

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

# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-striped">
  ...
</table>
# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-striped-columns">
  ...
</table>
# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-success table-striped">
  ...
</table>
# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-success table-striped-columns">
  ...
</table>

Строки с наведением

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

# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-hover">
  ...
</table>
# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-hover">
  ...
</table>

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

# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-striped table-hover">
  ...
</table>

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

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td class="table-active">@social</td>
    </tr>
  </tbody>
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td class="table-active">@social</td>
    </tr>
  </tbody>
</table>

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

Для акцентированных таблиц (полосатые строки, полосатые столбцы, строки с наведением, и активные таблицы), мы использовали несколько техники, чтобы сделать эти эффекты работать для всех наших вариантов таблиц:

  • Мы начинаем с установки фона ячейки таблицы с помощью пользовательского свойства --bs-table-bg. Все варианты таблиц затем устанавливают это пользовательское свойство для окрашивания ячеек таблицы. Таким образом, мы не попадаем в беду, если полупрозрачные цвета используются в качестве фонов таблиц.
  • Затем мы добавляем внутреннюю тень на ячейки таблицы с помощью box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); чтобы наложиться на любой указанный background-color. Он использует пользовательский каскад для переопределения box-shadow, независимо от специфичности CSS. Поскольку мы используем огромный разброс и нет размытия, цвет будет монохромным. Поскольку --bs-table-accent-bg по умолчанию установлен в transparent, у нас нет стандартной тени.
  • Когда добавляются классы .table-striped, .table-striped-columns, .table-hover или .table-active, либо --bs-table-bg-type или --bs-table-bg-state (по умолчанию установлен в initial) устанавливаются в полупрозрачный цвет (--bs-table-striped-bg, --bs-table-active-bg или --bs-table-hover-bg) чтобы окрасить фон и переопределить стандартный --bs-table-accent-bg.
  • Для каждого варианта таблицы, мы генерируем цвет --bs-table-accent-bg с наивысшим контрастом в зависимости от этого цвета. Например, акцентный цвет для .table-primary темнее, в то время как .table-dark имеет более светлый акцентный цвет.
  • Цвета текста и границ генерируются таким же образом, и их цвета наследуются по умолчанию.

За кулисами это выглядит так:

scss/mixins/_table-variants.scss 
@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 John Doe @social 
<table class="table table-bordered">
  ...
</table>

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

# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-bordered border-primary">
  ...
</table>

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

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

# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-borderless">
  ...
</table>
# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-borderless">
  ...
</table>

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

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

# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-sm">
  ...
</table>
# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-sm">
  ...
</table>

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

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social
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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

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

Ячейки таблицы <thead> всегда вертикально выравниваются вниз. Ячейки таблицы в <tbody> наследуют свое выравнивание из <table> и по умолчанию выравниваются вверх. Используйте классы вертикального выравнивания для повторного выравнивания, где это необходимо.

Heading 1 Heading 2 Heading 3 Heading 4
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell is aligned to the top. This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. 
<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>

Вложение

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

# First Last Handle
1 Mark Otto @mdo
Header Header Header
A First Last
B First Last
C First Last
3 John Doe @social 
<table class="table table-striped table-bordered">
  <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> светло- или темно-серыми.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Подвал таблицы

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social
Footer Footer Footer Footer 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Заголовки

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

List of users
# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

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

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social
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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

Отзывчивые таблицы

Отзывчивые таблицы позволяют легко прокручивать таблицы по горизонтали. Сделайте любую таблицу отзывчивой во всех видовых экранах, обернув .table в .table-responsive. Или выберите максимальную контрольную точку, до которой иметь отзывчивую таблицу, используя .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Вертикальное обрезание/усечение

Отзывчивые таблицы используют overflow-y: hidden, что обрезает любое содержимое, которое выходит за нижние или верхние края таблицы. В частности, это может обрезать выпадающие меню и другие сторонние виджеты.

Всегда отзывчивые

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

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Специфичные для контрольных точек

Используйте .table-responsive{-sm|-md|-lg|-xl|-xxl} по мере необходимости для создания отзывчивых таблиц до определенной контрольной точки. От этой контрольной точки и выше таблица будет вести себя нормально и не будет прокручиваться горизонтально.

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

#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
<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>

CSS

Sass переменные

scss/_variables.scss 
$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}emphasis-color);
$table-bg:                    var(--#{$prefix}body-bg);
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor);

$table-border-factor:         .2;
$table-border-width:          var(--#{$prefix}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:         var(--#{$prefix}secondary-color);

$table-bg-scale:              -80%;

Sass-циклы

scss/_variables.scss 
$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.