Таблица, которая не растягивает мобильную страницу

29.05.2024 · CSS

Таблица, которая не растягивает мобильную страницу

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

<div class="table-scroll" tabindex="0" role="region" aria-label="Сравнение тарифов">
  <table><!-- строки таблицы --></table>
</div>
<style>.table-scroll { max-width: 100%; overflow-x: auto; }</style>

Добавьте caption и заголовки th в настоящую таблицу. tabindex позволяет добраться до области с клавиатуры; оставьте видимое оформление фокуса. Если таблица внутри flex или grid, проверьте минимальную ширину её родителя. Прокрутка должна появляться у таблицы, а не у всей страницы.

Назад в блог

От идеи —
к первому шагу.

Расскажите, что хотите создать.
Обсудим задачу и наметим следующий шаг.