Как сделать Адаптивную таблицу

Основная разметка для нашего стола

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

Обратите внимание, что за исключением примера Foundation, стилизация этой таблицы будет основана на стилях таблиц Bootstrap .

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

Видео

Второй способ адаптации

Для начала поменяем разметку:

В принципе, вы можете с помощью js сделать тоже самое, пробежавшись по всем td.

Итак, раздали каждому столбцу атрибут data-label, который нам пригодится в будущем.

Задаем базовые стили:

Выглядит, как обычная таблица, естественно, сдвигая сайт на 320-420 пикселях, мы увидим горизонтальный скролл всего сайта. Не дело. Как это исправить? добавляем стили:

Здесь мы сделали строки таблицы блочными, удалили названия столбцов, а текст самих столбцов выровняли по правому краю. В свою очередь при помощи псевдокласса ::before мы присоединяем к левому краю наши data-атрибуты. И все получилось. Пример посмотрите в пене:

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

Надеюсь, Вам было интересно читать данную информацию. До скорых встреч)

Теги