Tablicy

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

<table class="table">

По умолчанию Bootstrap добавляет таблицам такой стиль:

• небольшие внутренние отступы внутри ячеек
• горизонтальные серые разделительные границы между строками

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

Имя	Фамилия	Адрес
Иван	Васильев	Москва
Мария	Ткаченко	Киев
Jullia	Hilmer	New-York

Код таблицы

<table class="table">
 <thead>
 <tr>
 <th>Имя</th>
 <th>Фамилия</th>
 <th>Адрес</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Иван</td>
 <td>Васильев</td>
 <td>Москва</td>
 </tr>
 <tr>
 <td>Мария</td>
 <td>Ткаченко</td>
 <td>Киев</td>
 </tr>
 <tr>
 <td>Jullia</td>
 <td>Hilmer</td>
 <td>New-York</td>
 </tr>
 </tbody>
 </table>

Чередование фона в строках

Класс .table-striped, назначенный таблице, добавит серый фон её нечётным строкам:

<table class="table table-striped">

Пример

Имя	Фамилия	Адрес
Иван	Васильев	Москва
Мария	Ткаченко	Киев
Jullia	Hilmer	New-York

Вертикальные и горизонтальные границы в ячейках

Класс .table-bordered добавляет горизонтальные и вертикальные границы ко всем ячейкам вашей таблицы:

<table class="table table-bordered">

Пример

Имя	Фамилия	Адрес
Иван	Васильев	Москва
Мария	Ткаченко	Киев
Jullia	Hilmer	New-York

Подсветка ячеек при наведении

Класс.table-hover, назначенный таблице, добавит серый фон строкам таблицы при наведении курсора мыши.

<table class="table table-hover">

Пример

Имя	Фамилия	Адрес
Иван	Васильев	Москва
Мария	Ткаченко	Киев
Jullia	Hilmer	New-York

Компактные отступы

Класс.table-condensedвы можете уменьшить внутренние отступы для ячеек таблицы, чтобы она выглядела более компактно. Это удобно для больших таблиц.

<table class="table table-condensed">

Пример

Имя	Фамилия	Адрес
Иван	Васильев	Москва
Мария	Ткаченко	Киев
Jullia	Hilmer	New-York

Контекстные фоны ячеек

Классы контекста можно применять, чтобы добавить различный цвет фона строкам &kt;tr> или ячейкам <dd> вашей таблицы:

Пример

Класс	Описание
.active	Добавляет класс с серым фоном, который используется при наведении на ячейку или строку
.success	Используется для сообщения об успехе
.info	Нейтральное информационное сообщение
.warning	Предупреждение, требующее внимания
.danger	Используется для сообщения об ошибке, опасности или каком-то негативном действии

Responsive (отзывчивые) таблицы

Класс.table-responsiveделает таблицу восприимчивой к размерам экрана, на котором отображается страница. На небольших устройствах (до 769 пикселей по ширине) таблица будет отображаться с горизонтальным скроллом, если не влезает в экран полностью. При отображении на любом экране шире 768 пикселей таблица будет отображаться как обычно.

<div class="table-responsive">
 <table class="table">
   ... 
 </table> 
</div>

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