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.