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

в 12:31, , рубрики: css, html, javascript, адаптируй дизайн, визуализация данных, Разработка веб-сайтов, таблицы

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

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

Responsive Tables

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

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

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

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

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

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

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

FooTable

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

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

Скачать на GitHub или посмотреть демо.

Stacktable.js

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

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

Скачать на Github или смотреть демо

Tablesaw

image

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

image

Скачать на GitHub

Пример без jQuery

image
image

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

Смотреть на Codepen.

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

Способ от David Bushell

image

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

Смотреть на Codepen.

Еще примеры

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

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

Источник

Поделиться

* - обязательные к заполнению поля