UNPKG

lintel-contrib-tables

Version:
410 lines (389 loc) 9.16 kB
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="../../bower_components/lintel/dist/lintel.css"> <link rel="stylesheet" href="../../dist/tables.css"> </head> <body class="pad"> <table class="table table-hover"> <thead> <tr> <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> <th>Heading 4</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table> <br><br> <!-- DIVIDED --> <table class="table table-divided"> <thead> <tr> <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> <th>Heading 4</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table> <br><br> <!-- BORDERED --> <table class="table table-bordered"> <thead> <tr> <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> <th>Heading 4</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table> <br><br> <!-- STRIPED --> <table class="table table-striped"> <thead> <tr> <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> <th>Heading 4</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table> <br><br> <!-- STATES --> <table class="table table-striped table-hover"> <thead> <tr> <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> <th>Heading 4</th> </tr> </thead> <tbody> <tr> <td>Striped</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr class="table-primary"> <td>Primary</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr class="table-secondary"> <td>Secondary</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr class="table-error"> <td>Error</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr class="table-warning"> <td>Warning</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr class="table-success"> <td>Success</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr class="table-info"> <td>Info</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td class="table-primary">Info</td> <td class="table-secondary">Cell 2</td> <td class="table-error">Cell 3</td> <td class="table-warning">Cell 4</td> </tr> <tr class="table-error"> <td class="table-success">Info</td> <td class="table-info">Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table> <br><br> <!-- SMALL --> <table class="table table-sm"> <thead> <tr> <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> <th>Heading 4</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table> <br><br> <!-- LARGE --> <table class="table table-lg"> <thead> <tr> <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> <th>Heading 4</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table> <br><br> <!-- NESTED TABLE --> <table class="table table-hover"> <thead> <tr> <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> <th>Heading 4</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td class="table-nested" colspan="4"> <table class="table"> <thead> <tr> <th>Nested Heading 1</th> <th>Nested Heading 2</th> <th>Nested Heading 3</th> <th>Nested Heading 4</th> </tr> </thead> <tbody> <tr> <td>Nested Cell 1</td> <td>Nested Cell 2</td> <td>Nested Cell 3</td> <td>Nested Cell 4</td> </tr> <tr> <td>Nested Cell 1</td> <td>Nested Cell 2</td> <td>Nested Cell 3</td> <td>Nested Cell 4</td> </tr> <tr> <td>Nested Cell 1</td> <td>Nested Cell 2</td> <td>Nested Cell 3</td> <td>Nested Cell 4</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br><br> <!-- RESPONSIVE TABLE --> <div class="table-wrap"> <table class="table"> <thead> <tr> <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> <th>Heading 4</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table> </div> <br><br> <!-- EDGE TABLE --> <div class="table-wrap"> <table class="table table-edge"> <thead> <tr> <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> <th class="text-right">Heading 4</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td class="text-right">Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td class="text-right">Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td class="text-right">Cell 4</td> </tr> </tbody> </table> </div> </body> </html>