![](https://habrastorage.org/getpro/habr/upload_files/cb3/2c7/493/cb32c74933f35b626b6bbe6c97650ef0.png)
Для кого эта статья
Почти все дизайнеры сталкиваются с проблемой адаптации при отрисовке таблиц в интерфейсах - а именно адаптации таблиц под мобильные устройства. Справедливо также будет отметить полезность статьи для Frontend разработчиков, которые эти самые таблицы верстают.
Проблема
Проблема у дизайнера начинается в тот момент, когда таблица из десктопной версии интерфейса адаптируется под мобильные устройства. Как мы знаем — таблицы могут иметь много столбцов, что влечёт за собой вылеты таблицы за ширину экрана на мобильном устройстве.
![](https://habrastorage.org/getpro/habr/upload_files/0b8/12a/3e4/0b812a3e4cfafbcf99a55716df64f3c2.png)
Данная проблема встречается повсеместно, и усугубить ее может пожалуй лишь контент ячейки, который не переносится построчно, увеличивая тем самым ширину колонки.
![](https://habrastorage.org/getpro/habr/upload_files/6dd/4b7/2a1/6dd4b72a1de80ec9688aca6d62d1c4cb.png)
Подопытный набор данных
Для того чтобы понимать лучше суть проблемы, мы придумаем себе таблицу, и будем ее адаптировать.
Колонки:
Номер
Фото
ФИО
Телефон
Email
Дата
Текст описание
Статус
Действия
Результатом станет довольно обширная таблица, которая имеет все нужные нам виды колонок. Признаться даже список сверху вызывает у меня вопросы — справа тратится слишком много места.
![](https://habrastorage.org/getpro/habr/upload_files/6df/31b/db2/6df31bdb240881b88b4be9729db87f92.png)
С фиксированной шириной и переносом строк
С шириной по контенту
![](https://habrastorage.org/getpro/habr/upload_files/040/476/de6/040476de68da7ec24fb18e2b77ddd879.png)
Анонс следующей статьи “О списках в интерфейсах и как их применять по феншую”.
Десктоп
В окне браузера наша таблица будет довольно комфортно себя чувствовать. Мы можем контролировать отображение контента так, как нам нужно. Даже если таблица перестанет помещаться по ширине — то мы всегда можем либо скрыть пару колонок с самым низким приоритетом, либо в крайнем случае сделать скроллинг по горизонтали.
Варианты адаптации
Проблема — наша таблица по ширине не влезает в телефон.
Ошибочные решения
Уменьшать шрифт
Убирать колонки
Делать растровую картинку с таблицей и вставлять ее в макет
![](https://habrastorage.org/getpro/habr/upload_files/f18/a66/fd0/f18a66fd0fee06b689a933c6b8a6eff4.png)
Возможные верные решения по убыванию
Каждую строку таблицы делать блоком
Горизонтальный скроллинг
Первый вариант адаптации - сделать каждую строку таблицу отдельным блоком, и вывести ее на экране телефона.
![](https://habrastorage.org/getpro/habr/upload_files/ca2/8cc/ef7/ca28ccef77306f7b76f987752c6f863c.png)
Проблема с данным методом: Удлиняется вертикальный скроллинг, данные повторяются. (частично решается добавлением фильтров для поиска)
![](https://habrastorage.org/getpro/habr/upload_files/874/cbe/ef5/874cbeef56dd794176d7144f711a7e48.png)
Возьмём за пример таблицу, которая отображена сверху. В таком виде она не поместится по ширине в мобильный экран. Для решения этой проблемы мы будем каждую строку таблицы преобразовывать в блок.
![](https://habrastorage.org/getpro/habr/upload_files/d6b/c49/007/d6bc49007bb32cc4c91bdf3fc8a9ca70.png)
Таким образом мы добьемся максимальной читаемости таблицы, без потери данных. Мы видим в строке все столбцы, при необходимости можем сделать функцию поиска, а так же добавить сортировки для блоков. Проблемой при данном подходе является длинный скроллинг.
Второй вариант - горизонтальный скроллинг таблицы
Для реализации данного подхода - нам нужно взять таблицу из десктопной версии сайта, и поместить ее в мобильный экран, а весь тот контент, который не помещается по ширине вынести за границы экрана, добавив при этом горизонтальную прокрутку к скрытым столбцам.
Субъективно для меня - это наименее подходящий вариант отображения таблиц в мобильных устройствах - так, как он скрывает большую часть контента за пределами окна устройства - что нарушает визуальную целостность данных контекста каждой строки таблицы (мы не видим строку целиком).
![](https://habrastorage.org/getpro/habr/upload_files/667/444/a4b/667444a4be3caeecb1895e6ddb55f02e.png)
Вывод
Теперь адаптация таблиц не должна нам казаться невыполнимой задачей, мы научились делать так, чтобы таблицы были удобоваримыми не только на десктопной версии сайтов, но и в мобильной (что применимо и к мобильным приложениям).
Если вы заметили ошибки, или вам есть что дополнить - дайте мне знать, я обязательно это сделаю. Спасибо за внимание!
gsaw
Иллюстрации из статьи такие блёклые, что на телефоне еле различимы.
ArtemKonkin Автор
Добавлю контраста )
— спасибо за интерес!