Адаптивные таблицы на сайте
Таблицы на мобильных устройствах — это частая боль веб-разработчиков и дизайнеров. Когда пользователь открывает таблицу с данными на смартфоне, часто видит либо крошечный текст, который невозможно прочитать, либо горизонтальной прокрутки, которая заставляет прыгать туда-сюда. Такие таблицы убивают конверсию: люди закрывают вашу страницу и идят к конкурентам. Проблема актуальна для интернет-магазинов (сравнение товаров), финансовых сервисов (таблицы курсов валют), авиабилетов (расписание рейсов) и любых других сайтов, где нужно показать много структурированной информации. Адаптивная таблица, или точнее адаптивные таблицы на сайте, — это не волшебство, а результат правильного использования HTML, CSS и веб дизайна, плюс продуманный подход к свойствам таблицы. За несколько часов можно переделать даже сложные таблицы на вашем сайта с помощью готового решения, и мы покажем вам как это сделать с готовым кодом, примерами и решениями для разных ситуаций.
Проблема не в самой таблице, а в том, как она отображается на экранах разного размера. На десктопе таблица спокойно раскидывается во всю ширину экрана: заголовок требует своего места, колонки расположены удобно, текст легко читается. На мобильном телефоне всё меняется: таблица упорно хочет остаться такого же размера, и браузеру приходится выбирать между двумя неприятностями — либо вписать всё по горизонтали и сделать текст нечитаемым, либо добавить горизонтальный скролл с использованием CSS.
Чаще всего теряет браузер, и адаптивная таблица начинает требовать прокрутки вбок. Пользователь видит только часть строки с элементами данных, прокручивает влево-вправо, теряет ориентацию между столбцов информации — и вот уже он смотрит конкурентский сайт.
Конкретные примеры проблемы
Посмотри на таблицы сравнения товаров на Авито: когда ты сравниваешь характеристики на мобильном устройстве, нужно постоянно скролить в стороны, чтобы увидеть всю информацию. На iPhone с экраном 390 пикселей эта задача становится особенно утомительной. Финансовые сервисы типа Яндекс.Касса грешат тем же: таблица с котировками валют просто не умещается по ширине, и ты прокручиваешь туда-сюда между колонками, пока не потеряешь суть того, что хотел сравнить. Работа с таблицами в режиме горизонтальной прокрутки на финансовом сайте становится мучением.
Сравнительные таблицы тарифов на SaaS-сервисах (Stripe, Notion) часто выходят за границы экрана на мобильных. Проблема в том, что вёрстка адаптивной таблицы требует нестандартного подхода. Когда дизайнер рисует макет в Figma, он работает с 16-дюймовым монитором. Разработчик берёт этот макет, пишет HTML код для тега table и CSS стили, и на десктопе всё выглядит красиво. Потом приходит багрепорт: «На мобильном таблица не соответствует дизайну» или «Горизонтальный скролл портит впечатление». Границы таблицы, размер шрифта и адаптивный дизайн требуют доработки с новыми параметрами.
Мобильных устройств сотни. iPhone 12 с экраном 390 пикселей — это одно, старый Android с 320 пикселями — совсем другое. Старые версии браузеров не поддерживают современные CSS свойства вроде display: grid. Новые браузеры требуют своего подхода. И вот адаптивная таблица с тегами tr th, td tr должна одновременно работать везде: на Chrome, на Safari, на браузере в забытом телефоне. Каждая таблица на каждом сайте требует своего варианта решения и добавить класс соответствующему элементу.
Почему это убивает конверсию
Горизонтальная прокрутка — не просто неудобство. Это сигнал пользователю: здесь что-то не так с дизайном страницы сайта, и безопасность данных взаимодействия может быть нарушена.
Человек заходит на сайт интернет-магазина, хочет сравнить две пары кроссовок: цена, размер, материал, доступность. Вместо этого он видит таблицу, которая требует скролить вниз, потом влево, потом вправо, потом опять вниз. Пять секунд — и человек уже в Google ищет конкурента. Использование данных и работа с таблицей требует слишком много усилий от пользователя.
Статистика говорит громко: 65-75% всего трафика сайтов идёт с мобильных устройств. Если таблицы на этих 65-75% требуют геройских усилий для чтения и использования информации, то вот тебе прямой удар по конверсии. Bounce rate (процент отказов) растёт, средний чек падает, результаты работы сайта ухудшаются. Человек просто закрывает вкладку после 10 секунд взаимодействия с таблицей, и все его данные покидают вашу базу.
Разные боли, один результат
Для разработчика адаптивная таблица — ещё одна задача, которую не заложили в спринте. Менеджер говорит: «Давай переделаем адаптивную таблицу на сайте». Идея звучит просто, но реализация требует 8-12 часов, если ты не знаешь как это делать. Или 2-3 часа, если знаешь приёмы. Нужно проверить на разных браузерах, на разных размерах экрана, на старых версиях iOS. Создание сайта с универсальной поддержкой — это не автоматизация, это ручная работа по написанию кода для тега table и изменению CSS стилей в каждом классе элемента.
Для дизайнера адаптивная таблица — сложная дилемма. Как сохранить красоту дизайна макета и при этом сделать его пригодным для экрана в 320 пикселей? Добавить больше padding и border 1px solid? Сменить размер шрифта? Переделать всю концепцию с display: flex и вертикальное выравнивание контента? Хороший пример — когда таблица на мобильной версии сайта трансформируется в карточки данных. Но это требует переосмысления всей концепции, не просто CSS-трюков. Есть несколько проверенных вариантов такой работы и способов адаптации.
Для владельца сайта это — прямые деньги на столе. Потеря конверсии на 10-15% из-за неработающих таблиц — это не число в отчёте, это реальная цена. Если у твоего сайта 10 000 посещений в месяц с мобильных, и 30% смотрит таблицы, то даже небольшой рост конверсии (с 2% до 3%) даёт плюс 30-40 заказов в месяц. На годовой основе это тысячи денег и увеличение результатов работы компании.
Как это исправить
К счастью, это всё исправляется быстро. Нет необходимости переписывать весь HTML код и CSS с нуля для каждого тега table. Есть несколько проверенных методов, как создать адаптивную таблицу, которая функциональна без потери данных и удобна в использовании. Большинство решений реализуются с помощью несложных изменений стилей и HTML разметки через div class или tr class. Все варианты можно внедрить за несколько часов работы. Давайте разбираться, какие конкретно подходы работают и как их реализовать на практике.