Таблицы в адаптивном дизайне — 2

В продолжение поста о дизайне таблиц ^[1], предлагаю примеры практических решений, которые помогут пользователю лучше взаимодействовать с данными в табличном виде на любых устройствах.

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

Responsive Tables

Начну с моего фаворита — Responsive Tables ^[3]. Это изящное решение на jQuery и Bootstrap 3, позволяющее скрывать некоторые колонки (все настраивается) или добавлять горизонтальную прокрутку на устройствах с маленькими экранами.

Самый простой способ

Есть быстрый вариант, без дополнительный плагинов и нагромождений, который позволит всем таблицам на сайте добавить горизонтальную прокрутку всего несколькими строками CSS:

@media screen and (max-width: 640px) {
	table {
		overflow-x: auto;
		display: block;
	}
}

Желательно, чтобы таблицы были обернуты в DIV с "overflow-x: scroll".

Недостатком этого способа является то, что нет никакой индикации горизонтального скролла.

FooTable

Интересное решение на jQuery, которое имеет как Bootstrap, так и отдельную версии. На маленьких экранах позволяет сократить количество колонок, при этом показывая скрытые данные по клику.

Скачать на GitHub ^[4] или посмотреть демо ^[5].

Stacktable.js

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

Скачать на Github ^[6] или смотреть демо ^[7]

Tablesaw

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

Скачать на GitHub ^[8]

Пример без jQuery

Пример отображения таблицы без использования jQuery-плагина.

Смотреть на Codepen ^[9].

Еще есть пример на Codepen ^[10] без Javascript, но с использованием display:block и data attributes.

Способ от David Bushell

Реализация адаптивных таблиц в виде добавления горизонтальной прокрутки с использованием только CSS. Выглядит очень хорошо.

Смотреть на Codepen ^[11].

Еще примеры

Существуют еще способы реализации адаптивных таблиц данных, но они в основном повторяют описанные. Вот некоторые из них:

• Способ от Zurb Foundation ^[12]. О нем я писал в предыдущем посте ^[2].
• Responsive Tables ^[13], автор Simon Elvery.
• Паттерны адаптивных таблиц ^[14] в каталоге Responsive Patterns ^[15] от Brad Frost. Этот каталог может быть полезен и другими примерами.

Автор: Кирилл

Источник ^[16]