Школа
Таблицы на мобильном
Что поменять, чтобы данные читались на узком экране
Таблицы на мобильном
Собрал Глеб Кемарский👁 3027
Что поменять, чтобы данные читались на узком экране
Собрал Глеб Кемарский👁 3027

Таблица — компактный формат. Она экономит высоту за счёт использования двух измерений носителя — ширины и высоты. Но на телефоне ширины как раз не хватает, поэтому можно использовать линейный вывод.
С подходами к адаптивной вёрстке вроде все уже разобрались, но вот с отображением табличных данных понятно не всё

Можно наглядно показать, что вкладок много, а не словами и цифрами это объяснять. Тогда больше людей будут их находить и пытаться изучить. А привычный и информативный элемент для скрытой части таблицы — полоса прокрутки.
Помогают ли счётчики скрытых пунктов меню?

Можно улучшить вид таблицы так, что она поместится даже на мобильном. А иногда её лучше заменить чем‑то другим.

Например

Привести в божеский вид расписание конференций:
Табличкой или календарём?

Сгруппировать цены напитков в ресторанном меню:
Как поступить при вёрстке меню на мобильных?

Убрать одинаковые элементы в карточках рассылок:
Как расположить элементы, чтобы данные любого размера смотрелись хорошо?

Определить город пользователя и показать нужный сервис‑центр вместо полного перечня по городам:
На сайте нашей организации ведём список сервис-центров

Подборка о том, как упрощать таблицы и делать их нагляднее:
https://bureau.ru/…/anton‑kartashov/tablitsy

Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть