Scroll Wide Tables
Are wide tables breaking your web page layouts, particularly on mobile? Wrap a scrolling container around them automatically with this JavaScript function.
Great for dealing with user-generated content, or data tables that contain a lot of bumf.
Works in modern browsers and IE9+ (no gradient in IE9, gradient disabled in IE10 owing to unsupported pointer-events that prevent click through to scrollbar below).
Please view the source of this page for HTML markup, CSS and JS.
Demo 1
If you're on desktop, reduce the width of the browser to see auto-scrolling take hold on the table below...
| This | is | a | wide‑ish | table | that | will | break | a | web | page | layout | at | narrow | viewports | widths |
Demo 2
This table is already wide enough to exceed the width of the page, so scrolling is present from page load.
| This | is | a | wide | table | that | will | break | a | web | page | layout | at | narrow | viewports | widths | or | in | small | screen | devices | particularly | on | mobile |
Usage
The scrollWideTables() JavaScript function takes 1 parameter;
- The CSS selector of wide tables, e.g. '.wide-tables' (alternatively use 'tables' to target all tables on the page)
Pop the Javascript above the closing </body> tag, and include the relevant CSS in your stylesheet.
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.