Inspect the working example
The table has three measurement columns and an explicit 600px width. Its wrapper has local overflow-x:auto and a focusable region name. The data genuinely needs column context; it is not replaced with unrelated cards.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| 320/390px frame | Inspect wrapper overflow | Table wider than wrapper; local horizontal scroll available |
| 960px frame | Inspect the same 600px table | Table fits without local horizontal overflow |
| Last value | Scroll to Difference | 800 remains reachable |
Follow the browser mechanism
A local scroll container contains the two-dimensional table without forcing the whole document wider. The wrapper needs a usable route to hidden columns, including focus and scrolling. This demonstrates one table task; it is not a whole-site WCAG conformance claim.
Hidden overflow cuts the route to columns
The alternative changes the wrapper to overflow-x:hidden.
<style>body{margin:8px}</style>
<style>.wrap{overflow-x:hidden}.wrap table{width:600px;max-width:none}</style><section class="wrap"><table><tr><th>Source</th><th>Minified</th><th>Difference</th></tr><tr><td>2000</td><td>1200</td><td>800</td></tr></table></section>The table remains wider than its narrow wrapper, but user scrolling is clipped by hidden overflow. Programmatic scroll changes are not evidence of a user route.
Try the repair
Does root scrollWidth fitting the viewport alone prove this table can be read?
Show the worked answer
No. Also reach the final column within the local region and inspect its value and headers.
- Keep root width bounded while measuring table and wrapper widths separately.
- Test real local scroll movement and final-column reachability.