2. SIMAI Framework - Универсальная веб-платформа для создания интерфейса информационных систем
  3. UI
  4. Контент

Таблица

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

Пример

Вот как выглядят таблицы .table в Bootstrap, где используется основная табличная разметка. Стили таблиц наследуются в Bootstrap 4, поэтому вложенные таблицы будут создаваться так же, как и родительский.

# Имя Фамилия Логин
1 Марк Отто @mdo
2 Джейкоб Тронтон @fat
3 Ларри Бёрд @twitter 
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Логин</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Марк</td>
      <td>Отто</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Джейкоб</td>
      <td>Тронтон</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Ларри</td>
      <td>Бёрд</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Также можно инвертировать цвета с легким текстом на темном фоне с помощью .table-inverse.

# Имя Фамилия Логин
1 Марк Отто @mdo
2 Джейкоб Тронтон @fat
3 Ларри Бёрд @twitter 
<table class="table table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Логин</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Марк</td>
      <td>Отто</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Джейкоб</td>
      <td>Тронтон</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Ларри</td>
      <td>Бёрд</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Главные параметры таблицы

Используйте один из двух классов-модификаторов, чтобы сделать <thead>s светлым или темно-серым.

# Имя Фамилия Логин
1 Марк Отто @mdo
2 Джейкоб Тронтон @fat
3 Ларри Бёрд @twitter
# Имя Фамилия Логин
1 Марк Отто @mdo
2 Джейкоб Тронтон @fat
3 Ларри Бёрд @twitter 
<table class="table">
  <thead class="thead-inverse">
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Логин</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Марк</td>
      <td>Отто</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Джейкоб</td>
      <td>Тронтон</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Ларри</td>
      <td>Бёрд</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-default">
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Логин</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Марк</td>
      <td>Отто</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Джейкоб</td>
      <td>Тронтон</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Ларри</td>
      <td>Бёрд</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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

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

# Имя Фамилия Логин
1 Марк Отто @mdo
2 Джейкоб Тронтон @fat
3 Ларри Бёрд @twitter 
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Логин</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Марк</td>
      <td>Отто</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Джейкоб</td>
      <td>Тронтон</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Ларри</td>
      <td>Бёрд</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Имя Фамилия Логин
1 Марк Отто @mdo
2 Джейкоб Тронтон @fat
3 Ларри Бёрд @twitter 
<table class="table table-striped table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Логин</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Марк</td>
      <td>Отто</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Джейкоб</td>
      <td>Тронтон</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Ларри</td>
      <td>Бёрд</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Таблица с границами

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

# Имя Фамилия Логин
1 Марк Отто @mdo
2 Марк Отто @TwBootstrap
3 Джейкоб Тронтон @fat
4 Ларри Бёрд @twitter 
<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Логин</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Марк</td>
      <td>Отто</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Марк</td>
      <td>Отто</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Джейкоб</td>
      <td>Тронтон</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Ларри Бёрд</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Имя Фамилия Логин
1 Марк Отто @mdo
2 Марк Отто @TwBootstrap
3 Джейкоб Тронтон @fat
4 Ларри Бёрд @twitter 
<table class="table table-bordered table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Логин</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Марк</td>
      <td>Отто</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Марк</td>
      <td>Отто</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Джейкоб</td>
      <td>Тронтон</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Ларри Бёрд</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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

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

# Имя Фамилия Логин
1 Марк Отто @mdo
2 Джейкоб Тронтон @fat
3 Ларри Бёрд @twitter 
<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Логин</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Марк</td>
      <td>Отто</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Джейкоб</td>
      <td>Тронтон</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Ларри Бёрд</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Имя Фамилия Логин
1 Марк Отто @mdo
2 Джейкоб Тронтон @fat
3 Ларри Бёрд @twitter 
<table class="table table-hover table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Логин</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Марк</td>
      <td>Отто</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Джейкоб</td>
      <td>Тронтон</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Ларри Бёрд</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Компактные таблицы

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

# Имя Фамилия Логин
1 Марк Отто @mdo
2 Джейкоб Тронтон @fat
3 Ларри Бёрд @twitter 
<table class="table table-sm">
  <thead>
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Логин</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Марк</td>
      <td>Отто</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Джейкоб</td>
      <td>Тронтон</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Ларри Бёрд</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Имя Фамилия Логин
1 Марк Отто @mdo
2 Джейкоб Тронтон @fat
3 Ларри Бёрд @twitter 
<table class="table table-sm table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Логин</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Марк</td>
      <td>Отто</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Джейкоб</td>
      <td>Тронтон</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Ларри Бёрд</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Контекстные классы

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

Класс Описание
.table-active Применяет цвет после наведения к определенной строке или ячейке
.table-success Указывает на успешное или положительное действие
.table-info Указывает на нейтральное информативное изменение или действие
.table-warning Предупреждает, что требуется особое внимание
.table-danger Указывает на опасное или потенциально негативное действие
# Заголовок столбца Заголовок столбца Заголовок столбца
1 Содержание столбца Содержание столбца Содержание столбца
2 Содержание столбца Содержание столбца Содержание столбца
3 Содержание столбца Содержание столбца Содержание столбца
4 Содержание столбца Содержание столбца Содержание столбца
5 Содержание столбца Содержание столбца Содержание столбца
6 Содержание столбца Содержание столбца Содержание столбца
7 Содержание столбца Содержание столбца Содержание столбца
8 Содержание столбца Содержание столбца Содержание столбца
9 Содержание столбца Содержание столбца Содержание столбца 
<!-- В строках -->
<tr class="table-active">...</tr>
<tr class="table-success">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-info">...</tr>

<!-- В ячейка (`td` или `th`) -->
<tr>
  <td class="table-active">...</td>
  <td class="table-success">...</td>
  <td class="table-warning">...</td>
  <td class="table-danger">...</td>
  <td class="table-info">...</td>
</tr>

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

# Заголовок столбца Заголовок столбца Заголовок столбца
1 Содержание столбца Содержание столбца Содержание столбца
2 Содержание столбца Содержание столбца Содержание столбца
3 Содержание столбца Содержание столбца Содержание столбца
4 Содержание столбца Содержание столбца Содержание столбца
5 Содержание столбца Содержание столбца Содержание столбца
6 Содержание столбца Содержание столбца Содержание столбца
7 Содержание столбца Содержание столбца Содержание столбца
8 Содержание столбца Содержание столбца Содержание столбца
9 Содержание столбца Содержание столбца Содержание столбца 
<!-- В строках -->
<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>

<!-- В ячейках (`td` или `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-responsive к любой .table для того чтобы появилось возможность скроллить по горизонтали на небольших устройствах (до 768px). Вы не увидите разницы при просмотре таблицы на устройствах больше, чем 768px.

Вертикальное отсечение

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

# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
1 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
2 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
3 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
1 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
2 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
3 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы 
<table class="table table-responsive">
  ...
</table>