Таблицы в Bootstrap 4 (table)

Таблицы в Bootstrap 4 (table)

Bootstrap 4 добавил несколько новых классов таблиц, которые помогают создавать согласованные стили и адаптивные таблицы.

Базовая таблица

Для базовой таблицы с небольшим отступом в ячейках и горизонтальными разделителями примените класс Bootstrap .table к элементу <table>.

<table class="table">
  ...
</table>

Стили таблиц в Bootstrap 4

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

Помните, что основным классом таблицы является класс .table, все остальные классы добавляются после него через пробел.

Темная таблица

Вы можете использовать класс .table-dark, чтобы инвертировать цвета. В этом случае фон таблицы будет темным, а цвет текста внутри ячеек будет светлым.

Полосатая таблица

блок 1

Для чередующихся цветов фона в строках таблицы, добавьте класс .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.

блок 3

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*