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

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

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

Если параметры перечислены в первом столбце, подойдёт для сравнения параметров (пример 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

Также опубликовано на Медиуме и переведено на английский.

Опечатка? Выделите её и нажмите кнопки Control и Enter.

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

Теперь электронную версию можно купить и читать на Литресе.

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

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