Responsive table
Самый простой надёжный способ — обернуть таблицу в контейнер с горизонтальным скроллом, не меняя саму таблицу.
Код
<div style="overflow-x:auto">
<table style="border-collapse:collapse;min-width:500px;width:100%">
<thead><tr><th style="border:1px solid #ccc;padding:0.5rem">Тариф</th><th style="border:1px solid #ccc;padding:0.5rem">Цена</th><th style="border:1px solid #ccc;padding:0.5rem">Лимит</th></tr></thead>
<tbody>
<tr><td style="border:1px solid #ccc;padding:0.5rem">Базовый</td><td style="border:1px solid #ccc;padding:0.5rem">0 ₽</td><td style="border:1px solid #ccc;padding:0.5rem">10 GB</td></tr>
</tbody>
</table>
</div>
Предпросмотр
Пояснение
min-width на таблице не даёт ей сжиматься до нечитаемого вида — вместо этого появляется горизонтальный скролл только внутри обёртки, а не всей страницы.
- Для очень узких экранов иногда лучше превратить строки таблицы в карточки через CSS (display:block на tr/td) вместо скролла.