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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример 6:

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

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

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

…

Также опубликовано на Медиуме. In English.

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