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) замість скролу.