Responsive Table jQuery Plugin - Demos

Narrow the width of your browser window or click on "Setup Table Containers" to see the plugin in action.
(Note: The demo table data includes white spaces so the "th" and "td" tags have a style of "white-space: nowrap;" to prevent unnecessary text wrapping)

Back to Article Setup Table Containers << Wider Containers >>

Demo 1

Basic table with default configuration, columns B to G will become horizontally scrollable when the width of the table exceeds the width of its container. The scrollable area also defaults to the right so that primary columns on the left and right are displayed on page load.

Column A Column B Column C Column D Column E Column F Column G
Content Cell A1 Content Cell B1 Content Cell C1 Content Cell D1 Content Cell E1 Content Cell F1 Content Cell G1
Content Cell A2 Content Cell B2 Content Cell C2 Content Cell D2 Content Cell E2 Content Cell F2 Content Cell G2
Content Cell A3 Content Cell B3 Content Cell C3 Content Cell D3 Content Cell E3 Content Cell F3 Content Cell G3
Content Cell A4 Content Cell B4 Content Cell C4 Content Cell D4 Content Cell E4 Content Cell F4 Content Cell G4
Content Cell A5 Content Cell B5 Content Cell C5 Content Cell D5 Content Cell E5 Content Cell F5 Content Cell G5
Content Cell A6 Content Cell B6 Content Cell C6 Content Cell D6 Content Cell E6 Content Cell F6 Content Cell G6
Content Cell A7 Content Cell B7 Content Cell C7 Content Cell D7 Content Cell E7 Content Cell F7 Content Cell G7
Content Cell A8 Content Cell B8 Content Cell C8 Content Cell D8 Content Cell E8 Content Cell F8 Content Cell G8

Demo 2

The staticColumns paramater has been set to 2 in this example, columns C to G become horizontally scrollable. The scrollRight parameter has also been set to false.

Column A Column B Column C Column D Column E Column F Column G
Content Cell A1 Content Cell B1 Content Cell C1 Content Cell D1 Content Cell E1 Content Cell F1 Content Cell G1
Content Cell A2 Content Cell B2 Content Cell C2 Content Cell D2 Content Cell E2 Content Cell F2 Content Cell G2
Content Cell A3 Content Cell B3 Content Cell C3 Content Cell D3 Content Cell E3 Content Cell F3 Content Cell G3
Content Cell A4 Content Cell B4 Content Cell C4 Content Cell D4 Content Cell E4 Content Cell F4 Content Cell G4
Content Cell A5 Content Cell B5 Content Cell C5 Content Cell D5 Content Cell E5 Content Cell F5 Content Cell G5
Content Cell A6 Content Cell B6 Content Cell C6 Content Cell D6 Content Cell E6 Content Cell F6 Content Cell G6
Content Cell A7 Content Cell B7 Content Cell C7 Content Cell D7 Content Cell E7 Content Cell F7 Content Cell G7
Content Cell A8 Content Cell B8 Content Cell C8 Content Cell D8 Content Cell E8 Content Cell F8 Content Cell G8

Demo 3

The staticColumns paramater has been set to 0 in this example, all columns become horizontally scrollable. The scrollRight parameter has also been set to false.

Column A Column B Column C Column D Column E Column F Column G
Content Cell A1 Content Cell B1 Content Cell C1 Content Cell D1 Content Cell E1 Content Cell F1 Content Cell G1
Content Cell A2 Content Cell B2 Content Cell C2 Content Cell D2 Content Cell E2 Content Cell F2 Content Cell G2
Content Cell A3 Content Cell B3 Content Cell C3 Content Cell D3 Content Cell E3 Content Cell F3 Content Cell G3
Content Cell A4 Content Cell B4 Content Cell C4 Content Cell D4 Content Cell E4 Content Cell F4 Content Cell G4
Content Cell A5 Content Cell B5 Content Cell C5 Content Cell D5 Content Cell E5 Content Cell F5 Content Cell G5
Content Cell A6 Content Cell B6 Content Cell C6 Content Cell D6 Content Cell E6 Content Cell F6 Content Cell G6
Content Cell A7 Content Cell B7 Content Cell C7 Content Cell D7 Content Cell E7 Content Cell F7 Content Cell G7
Content Cell A8 Content Cell B8 Content Cell C8 Content Cell D8 Content Cell E8 Content Cell F8 Content Cell G8

Demo 4

In this example the header row is within a "thead" tag, the rows are within a "tbody" tag & the footer is within a "tfoot" tag.

Column A Column B Column C Column D Column E Column F Column G
Content Cell A1 Content Cell B1 Content Cell C1 Content Cell D1 Content Cell E1 Content Cell F1 Content Cell G1
Content Cell A2 Content Cell B2 Content Cell C2 Content Cell D2 Content Cell E2 Content Cell F2 Content Cell G2
Content Cell A3 Content Cell B3 Content Cell C3 Content Cell D3 Content Cell E3 Content Cell F3 Content Cell G3
Content Cell A4 Content Cell B4 Content Cell C4 Content Cell D4 Content Cell E4 Content Cell F4 Content Cell G4
Content Cell A5 Content Cell B5 Content Cell C5 Content Cell D5 Content Cell E5 Content Cell F5 Content Cell G5
Content Cell A6 Content Cell B6 Content Cell C6 Content Cell D6 Content Cell E6 Content Cell F6 Content Cell G6
Content Cell A7 Content Cell B7 Content Cell C7 Content Cell D7 Content Cell E7 Content Cell F7 Content Cell G7
Content Cell A8 Content Cell B8 Content Cell C8 Content Cell D8 Content Cell E8 Content Cell F8 Content Cell G8
Footer Cell A Footer Cell B Footer Cell C Footer Cell D Footer Cell E Footer Cell F Footer Cell G

Demo 5

In this example the fourth column has some extra long text, this column's contents is allowed to wrap by applying a custom class which sets "white-space: normal;", a "min-width" is also applied to prevent it from wrapping too far.

Column A Column B Column C Column D Column E Column F Column G
Content Cell A1 Content Cell B1 Content Cell C1 Content Cell D1 with some longer text which wraps Content Cell E1 Content Cell F1 Content Cell G1
Content Cell A2 Content Cell B2 Content Cell C2 Content Cell D2 with some longer text which wraps Content Cell E2 Content Cell F2 Content Cell G2
Content Cell A3 Content Cell B3 Content Cell C3 Content Cell D3 with some longer text which wraps, this row has even more Content Cell E3 Content Cell F3 Content Cell G3