Таблица на телефоне без растягивания всей страницы
Сохраняем структуру табличных данных и помещаем горизонтальную прокрутку в отдельную область.
Задача и ограничения
Таблица с несколькими колонками может быть шире мобильного экрана. Сжимать весь текст до микроскопического размера или превращать каждую ячейку в отдельную карточку не всегда правильно: связи между строками и столбцами могут потеряться.
Пошаговое решение
Оставьте семантическую таблицу с caption и заголовочными th. Поместите её в обёртку с overflow-x: auto. Дайте области имя и tabindex=»0″, чтобы прокруткой можно было управлять с клавиатуры, если браузер не делает её фокусируемой автоматически.
Минимальную ширину таблицы выбирайте по данным. Если все столбцы короткие, дополнительная ширина не нужна. Для длинных текстов внутри ячеек разрешите перенос. Добавьте рядом короткую подсказку о горизонтальной прокрутке.
Код компонента
<style>
.table-scroll { overflow-x: auto; border: 1px solid #c9dbd0; }
table { border-collapse: collapse; min-width: 520px; width: 100%; }
th, td { padding: 12px; border: 1px solid #d8e4dc; text-align: left; }
th { background: #eaf4ee; }
</style>
<p>На узком экране таблицу можно прокрутить по горизонтали.</p>
<div class="table-scroll" role="region" aria-label="Файлы сайта" tabindex="0"><table><caption>Назначение файлов</caption><thead><tr><th scope="col">Файл</th><th scope="col">Назначение</th><th scope="col">Формат</th></tr></thead><tbody><tr><td>index.html</td><td>Структура главной страницы</td><td>HTML</td></tr><tr><td>style.css</td><td>Оформление интерфейса</td><td>CSS</td></tr></tbody></table></div>Что может пойти не так
Как проверить результат
- Откройте пример на узкой ширине.
- Переведите фокус на область и проверьте прокрутку.
- Убедитесь, что горизонтально прокручивается только таблица.
Разберите также: табличная разметка, overflow.