Виды таблиц с данными в адаптивном дизайне

в 15:15, , рубрики: css, адаптивная вёрстка, адаптивный дизайн, веб-дизайн, Веб-разработка, метки: , , ,

Одна из постоянных проблем верстальщиков адаптивных сайтов — это задача удобно представить обычные таблицы на мобильных устройствах. Вот как выглядят такие таблицы чаще всего:
Виды таблиц с данными в адаптивном дизайне

Не очень удобно, правда? К счастью уже существует несколько хитрых способов решить такую проблему.

1. Способ от Chris Coyier

Оригинал и демо на английском, перевод и демо на русском.

Виды таблиц с данными в адаптивном дизайне

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

2. Способ от Zurb.com

Подробности и демо на английском

Виды таблиц с данными в адаптивном дизайне

Хороший способ на Javascript/CSS, который добавляет горизонтальную прокрутку для ячеек с данными, при этом заголовки остаются на месте, очень удобно.

3. Способ от Scott Jehl

Демо

Виды таблиц с данными в адаптивном дизайне

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

4. Способ от Todd Parker

Демо

Виды таблиц с данными в адаптивном дизайне

В этом способе таблица на маленьком экране просто прячется под «спойлер». Как говорится, дешево и сердито.

Автор: grokru

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js