Главная

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

2017-05-09 в 12:31, admin, рубрики: 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 или посмотреть демо.