Адаптивные таблицы

Что делать с таблицами на адаптивных сайтах? Подборка решений:

Каждую строку преобразовать в небольшую табличку

Если параметры перечислены в первом столбце, подойдёт для сравнения параметров (пример 1.1):

11-1

11-2

Если параметры перечислены в шапке, подойдёт для последовательного изучения таблицы (пример 1.2):

12-1

12-2

Вариант с постепенным преобразованием и сложной компоновкой каждой получившейся подтаблицы (пример 1.3):

13-1 13-2 13-3 13-4

Горизонтальная прокрутка

Просто прокрутка — стандартное решение Bootstrap (пример 2.1):

21-1

21-2

Закрепить 1-й столбец, остальные прокручивать (пример 2.2 — по ссылке также рассмотрен случай, когда контента много в первом столбце):

22-1

22-2

Если параметры перечислены в шапке, преобразовать их в 1-й столбец. 1-й столбец закрепить (пример 2.3):

23-1

23-2

Вариант с сортировкой (пример 2.4):

24-1

24-2

Оставить самые важные столбцы

Остальные сворачивать (пример 3.1):

31-1

31-2

Дать пользователю выбор, какие столбцы видеть. По умолчанию скрывать неважные (пример 3.2):

32-1

32-2

Показывать содержимое после нажатия

Показывать, что таблица есть, а содержимое открывать после нажатия (пример 4):

40-2 40-3

Заставить пользователя вглядываться

Пропорционально уменьшать размеры таблицы и текста (пример 5):

50-1

50-2

Франкенштейн

Пример 6:

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

60-1

Дать пользователю настройки режима просмотра:

60-2

И возможность сортировки:

60-3

Update. Опубликовал подборку на Медиуме. In English.

22.07.2016: добавлен пример 1.3.

Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 250 рублей.

Адаптивные таблицы: 2 комментария

Обсуждение закрыто.