Table Responsive
A wrapper can own horizontal overflow so a wide table does not stretch the entire page. At a narrow viewport you can scroll the data while surrounding content still fits.
How it works
- A table represents related data. Keep a caption, meaningful headers, and the original reading order when changing its appearance.
- Use browser developer tools to inspect cell padding and column sizes instead of inserting spaces into the data.
A practical example
The HTML supplies the content; the CSS below styles it. Open both together in the playground, then change the lesson rules at the end of the stylesheet.
<div class="table-wrap"><table><caption>Repair club sessions</caption><thead><tr><th scope="col">Session</th><th scope="col">Day</th><th scope="col">Places</th></tr></thead><tbody><tr><th scope="row">Bicycle care</th><td>Saturday</td><td>8</td></tr><tr><th scope="row">Clothing repair</th><td>Sunday</td><td>12</td></tr></tbody></table></div>
body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; color: #25332d; background: #f4f7f2; }
.card { padding: 20px; background: white; border: 1px solid #d4dfd6; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: #17634c; }
.badge { display: inline-block; margin-bottom: 12px; font-size: .8rem; }
.layout { display: grid; gap: 16px; }
.photo { width: 100%; height: 160px; background: linear-gradient(135deg, #e4af6b, #668cba); }
button, input, select { font: inherit; padding: 8px; }
label { display: block; margin-block: 12px 4px; }
/* This lesson */
.table-wrap { overflow-x: auto; }
table { min-width: 36rem; border-collapse: collapse; }
th, td { padding: .8rem; border: 1px solid #c6d6c9; }
A wrapper can own horizontal overflow so a wide table does not stretch the entire page. At a narrow viewport you can scroll the data while surrounding content still fits.