Таблицы на мобилках: как перестать ненавидеть верстку данных
Привет! Подливай себе кофе, потому что сейчас мы будем разбирать одну из самых старых и занудных болей фронтенда — адаптивные таблицы. Ты наверняка сталкивался с этим: на десктопе у тебя шикарный дашборд с десятью колонками, а на айфоне он превращается в нечитаемое месиво с бесконечным горизонтальным скроллом. И ладно бы просто скролл, но бизнес обычно требует, чтобы «всё было красиво и удобно» на любом экране.
Проблема в том, что таблицы по своей природе — существа жесткие. Они сопротивляются сжатию до последнего. Но в 2026 году у нас уже достаточно инструментов, чтобы усмирить их без костылей и лишнего JavaScript.
Как мы страдали раньше
Вспомни (или содрогнись, если не застал), как мы выкручивались раньше. Самый популярный метод — превратить каждый tr в display: block, скрыть заголовки thead и через псевдоэлементы ::before с атрибутом content: attr(data-label) выводить названия колонок. Это работало, но заставляло нас дублировать текст заголовков в HTML-атрибутах каждого td. Настоящий ад для поддержки и чистоты кода.
Другой вариант — обернуть таблицу в div с overflow-x: auto. Это дешево и сердито, но UX ниже плинтуса: пользователю нужно скроллить вправо-влево, теряя контекст строки. Чтобы хоть как-то спасти ситуацию, мы использовали логические свойства CSS для отступов, чтобы таблица не прилипала к краям экрана в разных локализациях, но глобально проблему это не решало.
Как делать правильно в 2026 году
Сегодня наш лучший друг — это Container Queries (контейнерные запросы) в связке с CSS Grid. Главная фишка в том, что таблица теперь может адаптироваться не под размер всего окна браузера (viewport), а под размер своего непосредственного родителя. Это критично, если твоя таблица живет внутри виджета или узкой колонки сайдбара.
Идея проста: когда места становится мало, мы переключаем отображение строки таблицы tr на сетку (grid). Это позволяет нам перестроить ячейки в две колонки: слева — заголовок (через CSS переменную или скрытый элемент), справа — данные. При этом мы сохраняем семантику table, что крайне важно для скринридеров.
Для управления высотой строк в мобильном виде советую использовать динамические единицы вьюпорта, если ты делаешь полноэкранные таблицы-редакторы, чтобы они идеально вписывались в экран мобильного браузера без учета интерфейса системы.
Готовый сниппет кода
Ниже — современный подход. Обрати внимание, как мы используем display: contents для того, чтобы убрать влияние оберток и как аккуратно переключаем раскладку через @container.
/* HTML-структура стандартная, без лишних атрибутов */
Продукт
Цена
Статус
MacBook Pro 16
$2499
В наличии
iPad Pro 11
$799
Под заказ
Частая ошибка новичков
Самый большой грех — это замена тега table на кучу div-ов. Да, верстать дивами проще, и они «летают» по экрану как угодно. Но помни: как только ты убираешь табличные теги, ты ломаешь доступность (A11y). Скринридеры перестают понимать, что это связанные данные, и превращают чтение таблицы в бесконечный список бессвязных слов.
Если тебе уж очень хочется использовать дивы для верстки «под таблицу», обязательно добавляй ARIA-роли: role="table", role="row", role="cell". Но мой совет — оставайся на нативных тегах. Современный CSS позволяет гнуть их как угодно, не лишая пользователей с ограниченными возможностями удобного интерфейса.
И не забывай про vertical-align: middle для ячеек на десктопе — мелочь, а глаз мидла сразу зацепится за аккуратность исполнения!
🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!