Styled table
To style a table, add the table class to it.
| Entry Header 1 | Entry Header 2 | Entry Header 3 | Entry Header 4 |
|---|---|---|---|
| Entry First Line 1 | Entry First Line 2 | Entry First Line 3 | Entry First Line 4 |
| Entry Line 1 | Entry Line 2 | Entry Line 3 | Entry Line 4 |
| Entry Last Line 1 | Entry Last Line 2 | Entry Last Line 3 | Entry Last Line 4 |
Narrow table
By default, tables will take up all the horizontal space available. If you wish to have a narrow table, just add the table-narrow class to it.
| Entry Header 1 | Entry Header 2 | Entry Header 3 | Entry Header 4 |
|---|---|---|---|
| Entry First Line 1 | Entry First Line 2 | Entry First Line 3 | Entry First Line 4 |
| Entry Line 1 | Entry Line 2 | Entry Line 3 | Entry Line 4 |
| Entry Last Line 1 | Entry Last Line 2 | Entry Last Line 3 | Entry Last Line 4 |
Smaller table
You can reduce the overall text size in the table to fit in more content by adding the table-small.
| Entry Header 1 | Entry Header 2 | Entry Header 3 | Entry Header 4 |
|---|---|---|---|
| Entry First Line 1 | Entry First Line 2 | Entry First Line 3 | Entry First Line 4 |
| Entry Line 1 | Entry Line 2 | Entry Line 3 | Entry Line 4 |
| Entry Last Line 1 | Entry Last Line 2 | Entry Last Line 3 | Entry Last Line 4 |
Stroked table
To emphasize the division between the table rows, you can use the table-stroke class that will add full lines between the table rows.
| Entry Header 1 | Entry Header 2 | Entry Header 3 | Entry Header 4 |
|---|---|---|---|
| Entry First Line 1 | Entry First Line 2 | Entry First Line 3 | Entry First Line 4 |
| Entry Line 1 | Entry Line 2 | Entry Line 3 | Entry Line 4 |
| Entry Last Line 1 | Entry Last Line 2 | Entry Last Line 3 | Entry Last Line 4 |
Striped table
To add zebra-stripes to the table, use the table-striped class.
| Entry Header 1 | Entry Header 2 | Entry Header 3 | Entry Header 4 |
|---|---|---|---|
| Entry First Line 1 | Entry First Line 2 | Entry First Line 3 | Entry First Line 4 |
| Entry Line 1 | Entry Line 2 | Entry Line 3 | Entry Line 4 |
| Entry Last Line 1 | Entry Last Line 2 | Entry Last Line 3 | Entry Last Line 4 |
Hoverable table
To add a hover effect on the table, use the table-hover class.
| Entry Header 1 | Entry Header 2 | Entry Header 3 | Entry Header 4 |
|---|---|---|---|
| Entry First Line 1 | Entry First Line 2 | Entry First Line 3 | Entry First Line 4 |
| Entry Line 1 | Entry Line 2 | Entry Line 3 | Entry Line 4 |
| Entry Last Line 1 | Entry Last Line 2 | Entry Last Line 3 | Entry Last Line 4 |
Responsive table
To make tables scrollable on small devices, wrap it inside an element with the table-container class.
| Entry Header 1 | Entry Header 2 | Entry Header 3 | Entry Header 4 |
|---|---|---|---|
| Entry First Line 1 | Entry First Line 2 | Entry First Line 3 | Entry First Line 4 |
| Entry Line 1 | Entry Line 2 | Entry Line 3 | Entry Line 4 |
| Entry Last Line 1 | Entry Last Line 2 | Entry Last Line 3 | Entry Last Line 4 |