Horizontal Table Scroll (For Responsive Pages)
Some tables simply can't be made narrow enough to fit on a portrait-positioned phone, and still keep the text large enough to read.
A horizontal scrollbar can be implemented under the table when the table width exceeds the device width.
A technique to provide the scrollbar when needed is to put the table into a div containing the CSS overflow:auto; declaration. When the table is wider than the device, the div will provide horizontal scrolling.
This illustrates how to code it.
<div style="overflow:auto;">
<table>
[table content]
</table>
</div>
With the CSS overflow:auto; declaration, the div will spawn a horizontal scroll bar whenever the table width exceeds the available width.
The following table is wider than the column and is horizontally scrollable.
| One One One | Two Two Two | Three Three Three | Four Four Four | Five Five Five | Six Six Six |
This next table is narrower. On some phones, in portrait orientation, the table will be narrower than the screen. For those, the table can be scrolled horizontally.
| One One One | Two Two Two | Three Three Three |
To implement the functionality, put your table into a div with a CSS overflow:auto; declaration.
<div style="overflow:auto;">
[your table here]
</div>
When the table is wider than the available space, it's scrollable. Otherwise, not.
(This article first appeared with an issue of the Possibilities newsletter.)
Will Bontrager
