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>
