Как адаптировать таблицу с большим количеством столбцов для узкого экрана

6 минут чтения

Таблицу с множеством столбцов на узком экране проектируют вокруг главной задачи пользователя: сравнения, поиска или просмотра отдельных записей. Сначала определите обязательные поля, затем выберите горизонтальную прокрутку для сопоставления строк либо карточки для чтения записей. Сохраните заголовки, обозначьте скрытые данные и проверьте управление таблицей с клавиатуры и на реальных устройствах.

Принципы компактного отображения данных

Оставляйте на мобильном экране поля, нужные для основной задачи; второстепенные переносите в детали записи.
Для сравнения одинаковых показателей используйте прокручиваемую таблицу с видимыми названиями столбцов.
Для просмотра отдельных объектов рассмотрите карточное представление с подписями у каждого значения.
Не скрывайте важные данные без понятного способа их открыть.
Проверяйте адаптивность, доступность и удобство прокрутки на узком экране.

Сначала определите, какие столбцы нужны на узком экране

Начните с пользовательского сценария. В каталоге товаров человек может сначала искать название и цену, а технические характеристики открывать отдельно. В таблице расписания важны время, событие и место; дополнительные примечания могут быть доступны в подробностях.

Составьте список столбцов и отметьте, какие нужны для первого решения, а какие - для уточнения. Такой разбор подходит для таблиц, где записи можно читать по отдельности. Не стоит убирать поля, если пользователю необходимо сравнивать полный набор показателей в каждой строке или принимать решение по их совокупности.

Выберите между горизонтальной прокруткой и карточным представлением

Для сравнения однотипных данных обычно удобна таблица с горизонтальной прокруткой. Карточки подходят, когда важнее читать запись целиком, чем сравнивать значения в одном столбце. Возможен и смешанный вариант: краткие данные отображаются сразу, остальные - в раскрываемом блоке или на отдельной странице.

Чтобы подготовить адаптивную таблицу для мобильной версии сайта, понадобятся доступ к HTML и CSS проекта, возможность проверить изменения на тестовой странице и перечень полей с приоритетами. Если сайт работает на CMS или дизайн-системе, уточните, какие готовые компоненты уже доступны.

Выберите прокрутку, если пользователи сравнивают значения по строкам и столбцам.
Выберите карточки, если каждая запись рассматривается отдельно и её удобно читать вертикально.
Оставьте полный набор данных, если скрытые поля существенны для выбора; обеспечьте к ним доступ без потери названий и связи с записью.

Сделайте прокручиваемую таблицу удобной для сравнения

Если выбран скролл, оберните таблицу в контейнер, а не задавайте прокрутку всей странице. Пример показывает базовую разметку: адаптируйте названия полей и стили под свой проект.

Сохраните табличную структуру.
Используйте настоящие элементы таблицы, чтобы заголовки и ячейки сохраняли смысловую связь.
Добавьте контейнер прокрутки.
Задайте горизонтальное переполнение только области таблицы, оставив остальную страницу без бокового скролла.
Обозначьте заголовки столбцов.
Используйте элементы <th> и указывайте область заголовка через scope, чтобы название поля можно было связать со значением.
Сделайте ширину содержимого предсказуемой.
При необходимости задайте таблице минимальную ширину, чтобы значения не сжимались до нечитаемого состояния. Проверьте, что длинные слова и идентификаторы не ломают разметку.
Добавьте короткую подсказку о прокрутке.
Если часть столбцов не видна, сообщите, что таблицу можно прокрутить вбок. Не полагайтесь только на визуальный край обрезанной таблицы.

Быстрый режим

Оставьте поля, необходимые для основной задачи.
Для сравнения используйте контейнер с горизонтальной прокруткой.
Подпишите столбцы и сообщите пользователю о скрытой части.
Проверьте прокрутку, клавиатурное управление и читаемость на телефоне.

<div class="table-scroll" tabindex="0" aria-label="Таблица заказов. Для просмотра остальных столбцов прокручивайте область по горизонтали">
  <table>
    <caption>Заказы</caption>
    <thead>
      <tr>
        <th scope="col">Заказ</th>
        <th scope="col">Клиент</th>
        <th scope="col">Статус</th>
        <th scope="col">Дата</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">А-104</th>
        <td>Ирина</td>
        <td>В обработке</td>
        <td>29 октября</td>
      </tr>
    </tbody>
  </table>
</div>

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.table-scroll table {
  min-width: 40rem;
  border-collapse: collapse;
}

.table-scroll th,
.table-scroll td {
  padding: 0.75rem;
  text-align: left;
  white-space: nowrap;
}

Значение минимальной ширины в примере - отправная точка, а не универсальная настройка: подберите его по содержимому. Такая верстка таблицы для мобильных устройств показывает, как сделать таблицу адаптивной на мобильных устройствах, не превращая каждую строку в отдельный блок. Таблица с горизонтальной прокруткой на мобильном должна прокручиваться независимо от остальной страницы.

Покажите скрытые данные без потери контекста

Перед запуском проверьте результат по списку:

Основные для задачи столбцы доступны без лишних действий.
Пользователь понимает, что таблица продолжается за границей экрана.
При прокрутке понятно, к какой строке и столбцу относится значение.
Для скрытых полей предусмотрен понятный путь: прокрутка, карточка, раскрытие деталей или переход к записи.
В карточном виде каждое значение снабжено названием поля, а не только отображается отдельным числом.
Длинные подписи, ссылки и значения не перекрывают соседние данные.
Уменьшение масштаба или увеличение размера текста не делает содержимое недоступным.

При реализации через карточки проверьте, что название поля повторяется рядом со значением. Без такой подписи отдельное число или статус может потерять смысл после перестройки таблицы.

Настройте адаптивную разметку и доступность

При адаптивной верстке таблиц HTML CSS проверьте типичные ошибки до публикации:

Скрытие столбцов только стилями без альтернативного способа посмотреть их значения.
Замена таблицы на набор визуально похожих блоков без смысловой связи заголовков и ячеек.
Прокрутка всей страницы по горизонтали вместо отдельного контейнера.
Удаление заголовка таблицы или подписей столбцов ради экономии места.
Использование цвета как единственного способа отличить статус или важное значение.
Фиксация первого столбца без проверки, не перекрывает ли он остальные ячейки.
Применение слишком малых областей нажатия к ссылкам или действиям внутри ячеек.
Отсутствие видимого фокуса при переходе по элементам клавишей Tab.

Если контейнер прокрутки должен получать фокус с клавиатуры, настройте заметное оформление фокуса и проверьте поведение в целевых браузерах. Не добавляйте фокусируемость автоматически всем таблицам: она полезна, когда область действительно прокручивается и пользователь может взаимодействовать с ней.

Проверьте таблицу на реальных устройствах и сценариях

Проверяйте не только внешний вид, но и задачу: найти запись, сопоставить несколько значений, прочитать подробности или перейти к действию. Для проверки используйте телефон, узкое окно браузера, клавиатурную навигацию и увеличенный масштаб. Тестируйте реальные данные, включая длинные названия и пустые ячейки.

В зависимости от сценария рассмотрите альтернативы:

Карточки записей - когда пользователь чаще просматривает отдельные объекты, а не сравнивает их между собой.
Сводные столбцы и отдельная страница деталей - когда на первом экране важны несколько полей, а остальные нужны эпизодически.
Фильтры и поиск - когда много строк затрудняют поиск нужной записи; они дополняют таблицу, но не заменяют понятные заголовки.

После проверки на устройстве исправьте не только CSS, но и состав полей: если для выполнения задачи приходится постоянно искать важный столбец, пересмотрите приоритеты данных.

Об авторе

Алексей Воронов

Практические ситуации при адаптации таблиц

Какой вариант выбрать для таблицы с ценами и характеристиками?

Если пользователи сопоставляют несколько товаров по одинаковым параметрам, оставьте табличную структуру и добавьте горизонтальную прокрутку. Если они обычно открывают один товар, удобнее карточка с краткими данными и отдельным просмотром характеристик.

Можно ли скрыть часть столбцов на телефоне?

Можно, если скрытые поля доступны другим понятным способом и их потеря не мешает основной задаче. Не убирайте данные, необходимые для сравнения или принятия решения.

Нужно ли закреплять первый столбец?

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

Как подсказать пользователю, что таблица прокручивается?

Добавьте краткий текст рядом с таблицей или над ней и убедитесь, что частично видимый следующий столбец не выглядит случайным обрезанием. Подсказка должна оставаться понятной при клавиатурной навигации.

Что делать, если значения не помещаются даже при прокрутке?

Проверьте, можно ли сократить подписи без потери смысла или перенести пояснения в детали записи. Для идентификаторов и ссылок настройте перенос или безопасное отображение длинного содержимого.

Как проверить доступность таблицы без специальных инструментов?

Пройдите элементы клавишей Tab, следите за видимым фокусом и прочитайте заголовки вместе со значениями экранным диктором. Проверьте также, что названия строк и столбцов дают понять, к чему относится каждая ячейка.

Post Views: 0