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;

  1. 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.