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

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

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

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

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

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

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

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

Закрепить 1-й столбец, остальные прокручивать:

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

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

Вариант с сортировкой:

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

Остальные сворачивать:

Пример 3.1: чтобы просмотреть, пройдите по ссылке и нажмите на Getting Started

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

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

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

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

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

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

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

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

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

Пример 6

Понравилось — подписывайтесь


Смотрите миникурс «Адаптивные прототипы в Axure».

Подборку составил Антон Григорьев. Первая публикация.