Source

Столы

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

Примеры

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

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

# Первый Последний Справиться
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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Вы также можете инвертировать цвета — со светлым текстом на темном фоне — с помощью .table-dark.

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

Варианты головы стола

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

# Первый Последний Справиться
1 Отметка Отто @мдо
2 Джейкоб Торнтон @толстый
3 Ларри птица @твиттер
# Первый Последний Справиться
1 Отметка Отто @мдо
2 Джейкоб Торнтон @толстый
3 Ларри птица @твиттер 
<table class="table">
  <thead class="thead-dark">
    <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 class="table">
  <thead class="thead-light">
    <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-striped, чтобы добавить чередование зебры к любой строке таблицы в файле <tbody>.

# Первый Последний Справиться
1 Отметка Отто @мдо
2 Джейкоб Торнтон @толстый
3 Ларри птица @твиттер 
<table class="table table-striped">
  <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>
# Первый Последний Справиться
1 Отметка Отто @мдо
2 Джейкоб Торнтон @толстый
3 Ларри птица @твиттер 
<table class="table table-striped table-dark">
  <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-borderedдля границ со всех сторон таблицы и ячеек.

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

Стол без полей

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

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

.table-borderlessтакже можно использовать на темных столах.

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

Hoverable ряды

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

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

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

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

# Первый Последний Справиться
1 Отметка Отто @мдо
2 Джейкоб Торнтон @толстый
3 Ларри Птица @твиттер 
<table class="table table-sm">
  <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>
# Первый Последний Справиться
1 Отметка Отто @мдо
2 Джейкоб Торнтон @толстый
3 Ларри Птица @твиттер 
<table class="table table-sm table-dark">
  <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 rows -->
<tr class="table-active">...</tr>

<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-active">...</td>

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

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

# Заголовок Заголовок
1 Клетка Клетка
2 Клетка Клетка
3 Клетка Клетка
4 Клетка Клетка
5 Клетка Клетка
6 Клетка Клетка
7 Клетка Клетка
8 Клетка Клетка
9 Клетка Клетка 
<!-- On rows -->
<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>

<!-- On cells (`td` or `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в .table-responsive{-sm|-md|-lg|-xl}, заставляя таблицу прокручиваться по горизонтали в каждой max-widthконтрольной точке до (но не включая) 576 пикселей, 768 пикселей, 992 пикселей и 1120 пикселей соответственно.

Обратите внимание, что поскольку браузеры в настоящее время не поддерживают контекстные запросы диапазона , мы обходим ограничения min-и max-префиксы и области просмотра с дробной шириной (что может произойти при определенных условиях, например, на устройствах с высоким разрешением), используя значения с более высокой точностью для этих сравнений. .

Подписи

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

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

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

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

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

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

# Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок
1 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
2 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
3 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Определенная точка останова

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

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

# Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок
1 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
2 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
3 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок
1 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
2 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
3 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок
1 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
2 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
3 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок
1 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
2 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
3 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>