Detailed answer
Preserve table semantics and allow horizontal scrolling around a wide table when needed.
Keep text readable. If the scroll region needs keyboard focus, label it meaningfully and test keyboard access. Reducing columns or offering a simpler summary may serve readers better than forcing a dense desktop table into a narrow screen.
Example
<div role="region" aria-label="Lesson comparison" tabindex="0" style="overflow-x:auto"><table><caption>Lessons</caption><tr><th>Topic</th><th>Time</th></tr><tr><td>Forms</td><td>30 minutes</td></tr></table></div>
Understanding the behavior
A scrollable wrapper can preserve a real table's relationships on a narrow screen. Avoid hiding essential columns solely to make the table fit. If the scroll area needs keyboard access, provide a visible focus indicator and a clear accessible name.
Practical implementation notes
Test at a phone width and with zoom. Readers should be able to reach the final column without making the entire page scroll sideways. Check that long unbroken values do not expand the page container.
How to check it
Try horizontal scrolling with both touch and keyboard at a narrow width.
Expected result
All columns remain reachable without shrinking the text to an unreadable size.
Watch out: Do not remove headers without providing equivalent relationships.
Read the reference ↗