Как сделать удобной таблицу, которая не помещается по ширине экрана?

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

Основные подходы

• Горизонтальный скролл. Самый простой и безопасный вариант: обернуть таблицу в контейнер с overflow-x: auto. Данные не теряются, вёрстка не ломается.
• Карточная раскладка. На узких экранах строки превращаются в блоки, где каждая ячейка подписана через data-label. Удобно для мобильных, но требует больше CSS.
• Скрытие колонок. Второстепенные столбцы прячутся через медиазапросы, а важные остаются. Подходит, когда приоритеты колонок известны заранее.
• Раскрывающиеся детали. Основные данные видны сразу, остальное — по клику. Хорошо для таблиц с большим числом полей.

Пример с горизонтальным скроллом

<div class="table-wrap">
  <table>
    <thead>
      <tr><th>Имя</th><th>Email</th><th>Город</th><th>Телефон</th></tr>
    </thead>
    <tbody>
      <tr><td>Анна</td><td>a@mail.com</td><td>Москва</td><td>+7...</td></tr>
    </tbody>
  </table>
</div>

<style>
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 600px; border-collapse: collapse; }
</style>

Пример карточной раскладки

@media (max-width: 600px) {
  table, thead, tbody, tr, td { display: block; }
  thead { display: none; }
  td::before {
    content: attr(data-label) ": ";
    font-weight: bold;
  }
}

<td data-label="Город">Москва</td>

Такой подход делает каждую строку самостоятельным блоком, где подписи берутся из атрибута data-label. Пользователь видит те же данные, но вертикально, без горизонтальной прокрутки.

Итог: для быстрого решения используйте контейнер с overflow-x: auto, а если мобильный трафик значимый и колонок много — переходите на карточную раскладку или скрывайте второстепенные столбцы.