Simple Example 运行 »

$('#simple-example-table').stacktable();

Responsive

Use media queries to toggle the visibility of the original table and the stacktable (check out the stacktable.css example). You can pass in classes or an id to give to the stacktable. Adjust the size of your browser window to see it in action in the example below.

$('#responsive-example-table').stacktable({myClass:'your-class-name'});

Options

myClass: Space separated classes to add to the table.
headIndex: Use this to specify the row index of the header, in case it isn’t the first.

Card Table

Card table works similarly to stack table except it breaks each row into its own table. The row tables function like cards. Any content left in tfoot is also broken into its own card, this allows for things like view all links or pagination to be easily used.

$('#responsive-card-table-example').cardtable();

StackColumns

An alternative responsive design creates a copy of the table into a 2 column key/value format that preserves the columns of the original table. We call it stackcolumns to contrast with the default stacktables that preserves the lines of the original table.

$('#responsive-stackcolumns-example').stackcolumns();