CSS Responsive Tables
A responsive table shows a horizontal scrollbar when the screen is too small to fit the whole table.
To make one, wrap the <table> in a <div> container and set overflow-x: auto on that <div>.
Note: On macOS, scrollbars are hidden by default and only show while being used, even when overflow scrolling is set.
Example
A wide table wrapped in a div with overflow-x: auto scrolls sideways on small screens.
Prompt
An HTML page with a responsive table that scrolls horizontally on small screens.
In an internal
<style> block, style a table (collapsed borders, full width, padded bordered cells) and add a div.tablecontainer rule with overflow-x: auto. In the body, wrap a wide table (many columns) inside a div with class "tablecontainer". On a narrow window the table should get a horizontal scrollbar.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
div.tablecontainer {
overflow-x: auto;
}
</style>
</head>
<body>
<h2>Responsive Table</h2>
<p>Resize the browser window to see the effect. A horizontal scrollbar appears when the screen is too small.</p>
<div class="tablecontainer">
<table>
<tr><th>First Name</th><th>Last Name</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th></tr>
<tr><td>Jill</td><td>Smith</td><td>50</td><td>50</td><td>50</td><td>50</td><td>50</td><td>50</td><td>50</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td><td>94</td><td>94</td><td>94</td><td>94</td><td>94</td><td>94</td><td>94</td></tr>
<tr><td>Adam</td><td>Johnson</td><td>67</td><td>67</td><td>67</td><td>67</td><td>67</td><td>67</td><td>67</td><td>67</td></tr>
</table>
</div>
</body>
</html>