Bootstrap 4 добавил несколько новых классов таблиц, которые помогают создавать согласованные стили и адаптивные таблицы.
Базовая таблица
Для базовой таблицы с небольшим отступом в ячейках и горизонтальными разделителями примените класс Bootstrap .table к элементу <table>.
<table class="table"> ... </table>
Стили таблиц в Bootstrap 4
Далее, мы перечислим несколько полезных классов бутстрап для таблиц, которые изменяют внешний вид или поведение таблицы. Мы сознательно не будем писать код после описания класса, вы можете просто создать таблицу с любыми данными на своем компьютере и пробывать применять классы к ней.
Помните, что основным классом таблицы является класс .table, все остальные классы добавляются после него через пробел.
Темная таблица
Вы можете использовать класс .table-dark, чтобы инвертировать цвета. В этом случае фон таблицы будет темным, а цвет текста внутри ячеек будет светлым.
Полосатая таблица
Для чередующихся цветов фона в строках таблицы, добавьте класс .table-striped. Этот прием визуально упрощает чтение данных в больших таблицах.
Таблица с границами (бордерами)
Для того, чтобы добавить бордер для всей таблицы, используйте класс Bootstrap .table-bordered. По умолчанию, границы добавляются только для строк таблицы.
Подсвечивание строк при наведении
В больших таблицах часто используется эффект, когда каждая строка подсвечивается при наведении курсора мыши. Для достижения этого эффекта, добавьте класс .table-hover.
Цвет заголовка таблицы
Вы можете изменить фоновый цвет заголовка таблицы добавив тегу <thead> класс .thead-light или .thead-dark. Первый добавит светлый фон, а второй темный. Если не применять эти классы, цвет текста и фона заголовка таблицы останется таким же, как и в остальных ячейках.
Уменьшение отступов таблицы
Для того, чтобы уменьшить отступы внутри ячеек таблицы, примените к ней класс .table-sm. Это позволит сэкономить место если в таблице много колонок.
Контекстные классы (статусы)
Некоторые ячейки таблицы могут иметь так называемые контекстные классы, например «Успешно» или «Ошибка». Такие ячейки принято выделять соответствующим цветом фона, например зеленым или красным. В Bootstrap вы можете использовать классы .table-active, .table-success, .table-info, .table-warning, и .table-danger для этих целей.
Адаптивные таблицы в Bootstrap 4
Адаптивные таблицы автоматически создают горизонтальные полосы прокрутки при просмотре на устройствах меньше заданной точки останова.
Чтобы создать адаптивную таблицу, поместите таблицу в элемент <div>, к которому применен класс .table-responseive (или один из классов .table-responseive-*).
<div class="table-responsive"> <table class="table"> ... </table> </div>
Классы .table-responseive-* могут использоваться для указания конкретной точки останова. Это .table-response-sm, .table-response-md, .table-responseive-lg и .table-responseive-xl.
С этой точки останова и выше таблица будет вести себя нормально, а не прокручиваться горизонтально.
Класс .table-responseive эквивалентен .table-responseive-md.
Оставить комментарий