Tables

Responsive Tables

Add data-table="responsive" to make any table responsive, resize the window to see the behavior.

Product Name Format Price
Total: $171.10
Star Wars: The Complete Saga (Episodes I-VI) Blu-ray $84.96
Guardians of the Galaxy Blu-ray 3D $26.96
Interstellar Blu-ray $19.99
American Sniper DVD $14.24
Spirited Away Blu-ray + DVD $24.95

HTML

<table data-table="responsive"> <thead> <tr> <th>Product Name</th> <th>Format</th> <th>Price</th> </tr> </thead> <tfoot> <tr> <td></td> <td><strong>Total:</strong></td> <td><strong>$171.10</strong></td> </tr> </tfoot> <tbody> <tr> <td>Star Wars: The Complete Saga (Episodes I-VI)</td> <td>Blu-ray</td> <td>$84.96</td> </tr> <tr> <td>Guardians of the Galaxy</td> <td>Blu-ray 3D</td> <td>$26.96</td> </tr> ... </tbody> </table>

Striped Tables

Add data-table="striped" to decorate even rows with background color.

Product Name Format Price
Total: $171.10
Star Wars: The Complete Saga (Episodes I-VI) Blu-ray $84.96
Guardians of the Galaxy Blu-ray 3D $26.96
Interstellar Blu-ray $19.99
American Sniper DVD $14.24
Spirited Away Blu-ray + DVD $24.95

HTML

<table data-table="striped responsive"> <thead> <tr> <th>Product Name</th> <th>Format</th> <th>Price</th> </tr> </thead> <tfoot> <tr> <td></td> <td><strong>Total:</strong></td> <td><strong>$171.10</strong></td> </tr> </tfoot> <tbody> <tr> <td>Star Wars: The Complete Saga (Episodes I-VI)</td> <td>Blu-ray</td> <td>$84.96</td> </tr> <tr> <td>Guardians of the Galaxy</td> <td>Blu-ray 3D</td> <td>$26.96</td> </tr> ... </tbody> </table>