A wide table with many columns doesn't naturally shrink to fit a phone screen — responsive table techniques keep that data usable without breaking the underlying HTML table structure.
Syntax — The Horizontal Scroll Wrapper
<div style="overflow-x: auto;">
<table>
...
</table>
</div>Basic Example
<div class="table-scroll">
<table>
<caption>Full Course Comparison</caption>
<tr><th>Course</th><th>Duration</th><th>Fee</th><th>Mode</th><th>Certification</th></tr>
<tr><td>Data Science</td><td>6 months</td><td>₹45,000</td><td>Live Online</td><td>Yes</td></tr>
</table>
</div>
<style>
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
</style>Browser output: on a wide screen, the table displays normally; on a narrow phone screen, the wrapping <div> becomes horizontally scrollable so the table itself never gets squashed or broken.
How It Works
Wrapping the table in a block-level container with CSS overflow-x: auto lets that container scroll independently, while the table inside keeps its natural, undistorted column widths — the table's actual HTML structure never needs to change.
Important Attributes / CSS Techniques
| Technique | What it does |
|---|---|
Scrollable wrapper (overflow-x: auto) | Simplest, most broadly compatible approach — preserves the real table structure exactly |
| "Card" transformation via CSS | Restacks each row as a labeled card on narrow screens — more complex, but avoids scrolling entirely |
| Hiding less-critical columns at small widths | Shows only the most important columns on mobile, with a way to reveal the rest |
Real-World Example
<div style="overflow-x: auto;">
<table>
<caption>Semester Results</caption>
<tr><th>Student</th><th>Math</th><th>Science</th><th>English</th><th>History</th></tr>
<tr><td>Aman</td><td>92</td><td>88</td><td>79</td><td>84</td></tr>
</table>
</div>A 5-column results table — too wide to fit comfortably on most phones without either scrolling or crushing every column unreadably small.
Common Mistakes
- Shrinking font size aggressively to force a wide table to fit a phone screen, making it unreadable instead of scrollable
- Setting fixed pixel widths on table columns that don't adapt to the viewport at all
Best Practices
- Wrap wide tables in a horizontally scrollable container as the simplest, safest baseline solution
- Reserve the more complex "card" restacking technique for tables where scrolling genuinely hurts usability
Accessibility Considerations
A horizontally scrollable wrapper keeps the real table structure intact for screen readers — always safer than CSS techniques that visually restructure a table so heavily that its actual row/column relationships become confusing to assistive technology.
SEO Considerations
A properly responsive table (rather than one that's illegibly squeezed on mobile) contributes to better mobile usability signals, which factor into mobile search ranking.
Browser & Modern HTML Notes
The scrollable-wrapper technique works reliably across every modern browser with just plain CSS — no JavaScript or special HTML markup required.
Mini Practice
- Wrap a wide 6-column table in a scrollable
<div>and test it at a narrow browser width. - Research the CSS "card" table pattern and describe, in your own words, how it restacks rows on mobile.
Module 6 Practice Lab (Part 2)
Challenge
Take the reference student marks table from earlier in this module and rebuild it as a fully accessible table: real <caption>, <thead>/<tbody>, scope on every header, and a <tfoot> row showing the class average.
Mini Project — Course Comparison Table
Build a "Compare Our Courses" page with a single wide table (Course, Duration, Fee, Mode, Certification — 5+ columns), including a spanning title row via colspan, correct scope attributes throughout, a real <caption>, and a horizontally scrollable wrapper so it stays usable on mobile.
