Bootstrap CSS Таблицы справка
< Таблица > классы
Используйте классы ниже, чтобы стиль любой таблицы:
Class | Description | |
---|---|---|
.table | Добавление базовой стилизации (светлые отступы и только горизонтальные разделители) в любую < таблицу > | |
.table-striped | Добавляет Зебра-чередование в любую строку таблицы в пределах < tbody > (недоступно в IE8) | |
.table-bordered | Добавляет границу со всех сторон таблицы и ячеек | |
.table-hover | Включает состояние наведения в строках таблицы в < tbody > | |
.table-condensed | Делает таблицу более компактной, сокращая прокладку ячеек пополам | |
Объединение всех классов таблиц |
< TR >, < th > и < TD > классы
Используйте следующие классы для цветных строк или ячеек таблицы:
Класс | Описание | |
---|---|---|
.active | Применение цвета наведения (светло-серого) к определенной строке или ячейке | |
.success | Указывает на успешное или положительное действие | |
.info | Указывает нейтральное информативное изменение или действие | |
.warning | Указывает предупреждение, которое может потребоваться внимание | |
.danger | Указывает на опасное или потенциально отрицательное действие |
Адаптивные таблицы
Класс, реагирующий на таблицы, создает адаптивную таблицу. Затем таблица будет прокручиваться по горизонтали на небольших устройствах (под 768px). При просмотре на что-либо больше, чем 768px широкий, нет никакой разницы:
Пример
<div class="table-responsive">
<table class="table">
...
</table>
</div>