Чтобы таблица оставалась читаемой на узком экране без горизонтальной прокрутки, сначала оставьте только данные, необходимые для решения задачи, а затем выберите представление: компактную таблицу или карточки. Сохраните подписи и контекст значений, настройте перенос текста и проверьте макет на реальных данных. CSS помогает адаптации, но не заменяет продуманную структуру.
Опорные решения для узкой таблицы
- Определите, какое решение пользователь принимает по данным, и выделите поля, которые ему для этого нужны.
- Удалите повторяющиеся и второстепенные столбцы либо перенесите дополнительную информацию в раскрываемую область.
- Оставьте таблицу, если важно сопоставлять значения в строках и столбцах; выберите карточки, если важнее читать отдельные записи.
- На телефоне показывайте понятные названия полей рядом со значениями, а не полагайтесь на заголовки, оставшиеся за пределами экрана.
- Проверяйте результат с длинными текстами, пустыми значениями и реальными действиями пользователя.
Сначала определите, какие данные нужны для решения
Начните не с CSS, а с задачи: что пользователь должен понять, сравнить или выбрать? Этот подход подходит для каталогов, тарифов, расписаний и списков заказов, где на небольшом экране таблица перегружена.
Не меняйте представление автоматически, если сравнение по нескольким столбцам - основная задача, например при сопоставлении характеристик моделей. Сначала проверьте, можно ли сохранить нужное сравнение в компактном виде. Если это невозможно без потери смысла, горизонтальная прокрутка может быть уместнее, чем карточки, скрывающие важные различия.
Сократите столбцы без потери смысла
Перед правками подготовьте содержимое и доступ к странице в тестовой среде. Понадобятся:
- перечень столбцов и объяснение, какую задачу решает каждый из них;
- примеры типичных и граничных значений, включая длинные названия и пустые поля;
- доступ к шаблону или компоненту, который выводит таблицу;
- инструменты разработчика браузера для проверки узкой ширины и стилей;
- возможность сверить изменения с владельцем контента или продукта.
Удаляйте столбец только после проверки, что его данные не нужны для выбора и не являются обязательными. Если информация нужна иногда, рассмотрите дополнительный экран или раскрываемую область, но обозначьте, где её найти.
Когда таблицу лучше превратить в карточки
Карточки удобны, когда каждая строка описывает самостоятельный объект: заказ, товар или запись. Табличное представление предпочтительнее, когда пользователь регулярно сравнивает значения в одинаковых столбцах.
- Определите единицу чтения. Проверьте, рассматривает ли пользователь одну запись за раз или сопоставляет несколько записей по общим признакам.
- Выберите формат для узкого экрана. Для самостоятельных записей подготовьте карточку с названием объекта и подписями полей. Для сравнения сохраните таблицу, сократив второстепенные столбцы и подписи.
- Сохраните связь названия и значения. В карточке размещайте подпись рядом с соответствующим значением. Не оставляйте значение без контекста, если заголовок столбца на мобильном экране не виден.
- Перенесите действия к нужной записи. Если у строки есть ссылка или команда, убедитесь, что она заметна и относится именно к этой записи. Не делайте кликабельной всю карточку, если внутри есть другие отдельные действия.
- Сверьте представления. Убедитесь, что карточка передаёт те же важные данные и состояния, что и исходная строка, включая отсутствие значения или предупреждение.
Для карточного представления данные удобно размечать как пары "подпись - значение". Например, в CSS можно скрыть визуальный заголовок таблицы на узком экране и показать подписи через атрибуты ячеек. Если используете такой приём, задайте подписи в разметке и проверьте доступность таблицы вспомогательным технологиям.
@media (max-width: 40rem) {
table,
tbody,
tr,
td {
display: block;
}
thead {
position: absolute;
clip: rect(0, 0, 0, 0);
}
td::before {
content: attr(data-label);
font-weight: 600;
}
}Пример требует адаптации к разметке сайта: каждой ячейке нужно передать корректное значение data-label, а оформление скрытого заголовка не должно удалять его из доступного имени таблицы.
Быстрый режим
- Оставьте поля, без которых нельзя принять решение.
- Выберите таблицу для сравнения или карточки для чтения отдельных записей.
- Покажите подписи рядом со значениями и сохраните нужные действия.
- Проверьте макет на длинных данных и узком экране.
Как перестроить строки для чтения на телефоне
После адаптации пройдите по чек-листу на узкой ширине:
- У каждой записи есть название или другой понятный идентификатор.
- Подписи полей не теряются при скрытии заголовков таблицы.
- Пользователь может отличить одно значение от другого без опоры только на цвет.
- Длинные слова и ссылки не обрезаются так, что меняется смысл.
- Пустое значение отличается от нуля, отсутствующего поля или ошибки загрузки.
- Ссылки и действия доступны и визуально связаны с нужной записью.
- Порядок чтения соответствует порядку элементов в разметке.
- Карточки не смешивают данные соседних записей.
Настройте типографику и отступы для компактного экрана
Частые ошибки, из-за которых адаптивная таблица теряет читаемость:
- уменьшать текст настолько, что его трудно читать, вместо сокращения или перестройки содержимого;
- задавать ячейкам фиксированную высоту, из-за которой длинный текст обрезается;
- запрещать перенос строк для всех значений без исключения;
- сжимать отступы до нуля, из-за чего подписи и соседние значения сливаются;
- использовать многоточие для важных данных без способа увидеть полный текст;
- применять один стиль ко всем столбцам, хотя даты, суммы и описания требуют разного выравнивания;
- скрывать столбцы без оценки того, нужна ли эта информация для принятия решения;
- добавлять декоративные линии и фон, которые мешают различать группы данных.
Для компактного экрана задавайте ширину гибко, позволяйте переноситься длинным текстовым значениям и сохраняйте визуальный интервал между полями. Короткие числовые значения можно выравнивать последовательно, чтобы их было легче сравнивать.
Проверьте макет на реальных данных и устройствах
Выберите подходящий способ отображения по сценарию:
- Карточки. Уместны для списков объектов, которые обычно просматривают по одному: например, заказов или товаров.
- Сокращённая таблица. Подходит, когда важно быстро сравнивать несколько главных показателей, а дополнительные детали можно вынести отдельно.
- Приоритетные поля с раскрытием деталей. Используйте, если основная информация должна быть видна сразу, а остальные данные нужны лишь иногда. Сделайте раскрытие заметным и доступным с клавиатуры.
- Сохранение прокрутки. Оставьте горизонтальную прокрутку, если одновременное сравнение множества обязательных столбцов важнее отображения всего содержимого без прокрутки.
Проверьте адаптивную таблицу для сайта с реальным объёмом текста, а не только с короткими демонстрационными значениями. Протестируйте дизайн таблиц для мобильных устройств на разных ширинах, проверьте управление клавиатурой и убедитесь, что изменения не повредили десктопную версию. Так можно понять, как сделать таблицу адаптивной без потери важных данных: на практике таблица без горизонтальной прокрутки получается прежде всего за счёт выбора формата и содержания. Это часть адаптивного дизайна сайта для мобильных устройств, а не изолированный CSS-приём.
Практические нюансы адаптации табличных данных
Как понять, что таблицу пора заменить карточками?
Карточки подходят, если пользователь чаще читает отдельную запись, чем сравнивает одинаковые поля между строками. Если сравнение - основная задача, сохраните табличную структуру и сократите второстепенные данные.
Можно ли скрыть часть столбцов на телефоне?
Можно, если скрытые сведения не нужны для решения в этом сценарии и пользователь может найти их в другом месте. Не скрывайте важные условия или показатели без понятной альтернативы.
Нужно ли оставлять заголовки у карточек?
Да: подпись поля помогает понять значение независимо от соседних элементов. Если визуальный заголовок таблицы скрыт, проверьте, что названия полей остаются доступны и связаны с ячейками.
Как обращаться с длинными значениями?
Для описаний разрешите перенос строк и проверьте длинные ссылки и составные слова. Не обрезайте важный текст без способа просмотреть его полностью.
Всегда ли нужно добиваться отсутствия горизонтальной прокрутки?
Нет. Если пользователю необходимо одновременно сравнивать много обязательных столбцов, прокрутка может лучше сохранить структуру данных, чем чрезмерное сжатие или сокрытие полей.
Что проверить перед публикацией адаптации?
Проверьте реальный контент, подписи, длинные значения, пустые состояния, ссылки и порядок чтения. Убедитесь, что страницу можно использовать с клавиатуры и что десктопный вид не пострадал.
Автор: Виктор Егоров