Респонсив таблицы на CSS и дата-атрибутах

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

Есть очень простой и элегантный способ сделать таблицу адаптивной с помощью простых манипуляций. Все, что нам надо — добавить дата-атрибут каждой ячейке.

Покажу на примере, как это сделать. Вот пример таблицы:

Если вы присмотритесь — мы добавили атрибут data-title каждой ячейке. Содержимое этого атрибута повторяет соответствующие заголовки таблицы.

Теперь очередь за стилями. Что нужно сделать в точке перелома (у нас она будет на 768px)? Скрываем область заголовков, делаем блоками все строки и ячейки внутри таблицы. И самое главное: создаем для каждой ячейки псевдоэлемент с контентом из дата-атрибута data-title этой ячейки. Остальное — просто стилизация.

Вот CSS:

Пользуйтесь!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *