Responsive table
The simplest reliable approach is wrapping the table in a container with horizontal scroll, without touching the table itself.
Code
<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">Plan</th><th style="border:1px solid #ccc;padding:0.5rem">Price</th><th style="border:1px solid #ccc;padding:0.5rem">Limit</th></tr></thead>
<tbody>
<tr><td style="border:1px solid #ccc;padding:0.5rem">Basic</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>
Preview
Explanation
min-width on the table stops it from shrinking to an unreadable size — instead, horizontal scroll appears only inside the wrapper, not on the whole page.
- On very narrow screens it's sometimes better to turn table rows into stacked cards via CSS (display:block on tr/td) instead of scrolling.