Как сделать таблицу адаптивной с прокруткой

Короткий ответ

Оберните таблицу в блок с overflow-x: auto — на узком экране появится горизонтальная прокрутка внутри блока, а не всей страницы:

<style>
  .table-wrap { overflow-x: auto; max-width: 300px; border: 1px solid silver; }
  table { border-collapse: collapse; }
  th, td { padding: 6px 12px; white-space: nowrap; text-align: left; }
</style>
 
<div class="table-wrap" tabindex="0" role="region" aria-label="Price list">
  <table>
    <tr><th>Plan</th><th>Storage</th><th>Users</th><th>Support</th><th>Price</th></tr>
    <tr><td>Basic</td><td>10 GB</td><td>1</td><td>Email</td><td>$5</td></tr>
    <tr><td>Team</td><td>100 GB</td><td>10</td><td>Chat</td><td>$25</td></tr>
  </table>
</div>

white-space: nowrap не даёт ячейкам сжиматься в узкие столбики с текстом в одно слово на строку.

Прокрутка с клавиатуры

Атрибут tabindex="0" позволяет выбрать обёртку клавишей Tab и прокручивать стрелками. Вместе с ним задают role="region" и aria-label, чтобы скринридер объяснил, что это за область.

Другие варианты

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

Частая ошибка

overflow-x: auto ставят самой таблице. У элемента <table> это свойство не работает: таблица всё равно растягивается и вылезает за экран, а прокручивается вся страница. Нужна обёртка — обычный <div>.