Bootstrap таблицы и базовые классы

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

Базовый класс таблицы bootstrap

Базовым классом таблиц является class=“table”. Достаточно добавить его в <table> и создаются отступы и горизонтальные разделители секций.

#	Имя	Фамилия	Пользователь
1	Илья	Муромец	@illusha
2	Добрыня	Никитич	@dobr
3	Алеша	Попович	@aleksiy_popovich

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Пользователь</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Илья</td>
      <td>Муромец</td>
      <td>@illusha</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Добрыня</td>
      <td>Никитич</td>
      <td>@dobr</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Алеша</td>
      <td>Попович</td>
      <td>@aleksiy_popovich</td>
    </tr>
  </tbody>
</table>

Это самый простой вид в базовой разметке таблиц. Все стили таблиц которые присутствуют на вашем сайте наследуются в Бутстрап. Заменив класс на .table-dark получим инверсию цвета.

#	Имя	Фамилия	Пользователь
1	Илья	Муромец	@illusha
2	Добрыня	Никитич	@dobr
3	Алеша	Попович	@aleksiy_popovich

Чередование фона в ячейках таблицы

В оформление таблицы можно добавить автоматически чередование фона в строчках: одна строка стандартного белого, следующая с серым фоном (background-color: #f9f9f9;) Чередование фона в строчках таблицы добавит класс .table-striped

#	Имя	Фамилия	Пользователь
1	Илья	Муромец	@illusha
2	Добрыня	Никитич	@dobr
3	Алеша	Попович	@aleksiy_popovich
4	Святогор		@svyatogor

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Пользователь</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Илья</td>
      <td>Муромец</td>
      <td>@illusha</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Добрыня</td>
      <td>Никитич</td>
      <td>@dobr</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Алеша</td>
      <td>Попович</td>
      <td>@aleksiy_popovich</td>
    </tr>
  </tbody>
</table>

Выделение строк таблиц при наведении

Чтобы при наведении курсора на строчку таблицы фон строки выделялся цветом, добавляем к базовому селектору класс .table-hover
В базовом классе используется значение свойства background-color: #f5f5f5; и при желании его можно изменить.

#	Имя	Фамилия	Пользователь
1	Илья	Муромец	@illusha
2	Добрыня	Никитич	@dobr
3	Алеша	Попович	@aleksiy_popovich
4	Святогор		@svyatogor

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

Таблица с горизонтальной прокруткой

Когда в таблице много ячеек и просто не обойтись без горизонтальной прокрутки используем класс .table-responsive
Этот класс так же используем если таблица большая и при просмотре на мобильном телефоне без прокрутки не обойтись.

Количество дней в январе

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<table class="table table-responsive">
…
</table>

Выделить цветом строки и ячейки таблицы

В базовых классах Bootstrap уже учтена необходимость выделения цветом строки или отдельной ячейки.

Type	Заголовок колонки	Заголовок колонки
Активный (table-active)	Ячейка	Ячейка
По умолчанию (Default)	Ячейка	Ячейка
Главный (table-primary)	Ячейка	Ячейка
Второстепенный (table-secondary)	Ячейка	Ячейка
Успех (table-success)	Ячейка	Ячейка
Опасность (table-danger)	Ячейка	Ячейка
Предупреждение (table-warning)	Ячейка	Ячейка
Предупреждение (table-info)	Ячейка	Ячейка
Светлый (table-light)	Ячейка	Ячейка
Темный (table-dark)	Ячейка	Ячейка

Применять цвет можно и на целую строчку <tr> и к ячейке. Например, применим цветовую схему primary к ячейке Добрыня

#	Имя	Фамилия	Пользователь
1	Илья	Муромец	@illusha
2	Добрыня	Никитич	@dobr
3	Алеша	Попович	@aleksiy_popovich

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Пользователь</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Илья</td>
      <td>Муромец</td>
      <td>@illusha</td>
    </tr>
    <tr>
      <th>2</th>
      <td class="table-primary">Добрыня</td>
      <td>Никитич</td>
      <td>@dobr</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Алеша</td>
      <td>Попович</td>
      <td>@aleksiy_popovich</td>
    </tr>
  </tbody>
</table>