Spruce ships with some basic table styling targeted only with classes to opt-in.
Default Style
Use the table class on an HTML <table> element to use the default styling.
| ID | Name | Block of Text |
|---|---|---|
| 1 | John Doe | Nullam quis risus eget urna mollis ornare vel eu leo. |
| 2 | Jane Doe | Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. |
html<table class="table"> <caption>A generic introduction to the table.</caption> <thead> <tr> <th scope="col">ID</th> <th scope="col">Name</th> <th scope="col">Block of Text</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>John Doe</td> <td>Nullam quis risus eget urna mollis ornare vel eu leo.</td> </tr> </tbody></table>Use scope attribute to define which header relates with which table cells.
Striped and Hover Styles
Use the table--striped class on a <table> to display a zebra-striped styling. To add hover style to the table rows, use the table--hover class.
You control the stripe pattern with the config('stripe', $table) variable (odd, even).
| ID | Name | Number |
|---|---|---|
| 1 | John Doe | 900 |
| 2 | Jane Doe | 1200 |
| 3 | Jim Doe | 1200 |
html<table class="table table--striped table--hover"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Name</th> <th scope="col">Number</th> </tr> </thead> <tbody> ... </tbody></table>Clear Style
Use the table--clear-border class on a <table> to remove the default border style.
| ID | Name | Number |
|---|---|---|
| 1 | John Doe | 900 |
| 2 | Jane Doe | 1200 |
html<table class="table table--clear-border"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Name</th> <th scope="col">Number</th> </tr> </thead> <tbody> ... </tbody></table>Small Style
Use the table--sm class on a <table> to make it smaller.
| ID | Name | Number |
|---|---|---|
| 1 | John Doe | 900 |
| 2 | Jane Doe | 1200 |
html<table class="table table--sm"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Name</th> <th scope="col">Number</th> </tr> </thead> <tbody> ... </tbody></table>Rounded Style
Use the table--rounded class on a <table> to make rounded background. For the best result use it with table--striped and table--clear-border.
| ID | Name | Number |
|---|---|---|
| 1 | John Doe | 900 |
| 2 | Jane Doe | 1200 |
| 3 | Jack Doe | 200 |
| 4 | Jill Doe | 1400 |
html<table class="table table--rounded table--striped table--clear-border"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Name</th> <th scope="col">Number</th> </tr> </thead> <tbody> ... </tbody></table>In Line Style
Use the table--in-line class on a <table> to remove the inline padding from the first (on start) and last (on end) <th> and <td> element.
| ID | Name | Number |
|---|---|---|
| 1 | John Doe | 900 |
| 2 | Jane Doe | 1200 |
| 3 | Jack Doe | 200 |
| 4 | Jill Doe | 1400 |
html<table class="table table--in-line"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Name</th> <th scope="col">Number</th> </tr> </thead> <tbody> ... </tbody></table>Responsive, Scrollable Table
Adding the <div class="table-responsive"></div> as a wrapper element you can make the tables horizontally scrollable.
You can control the width of the scrollable table with the config('responsive-inline-size', $table) globally and locally with the --inline-size custom property.
html<div class="table-responsive"> <table class="table table--striped table--hover"> <thead> ... </thead> <tbody> ... </tbody> </table></div>html<div class="table-responsive" style="--inline-size: 20rem;"> <table class="table"> ... </table></div>Variables
There are some defaults variables that you can configure to customize the table's look.
