Tables

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.

A generic introduction to the table.
IDNameBlock of Text
1John DoeNullam quis risus eget urna mollis ornare vel eu leo.
2Jane DoeVestibulum 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.

IDNameNumber
1John Doe900
2Jane Doe1200
3Jim Doe1200
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.

IDNameNumber
1John Doe900
2Jane Doe1200
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.

IDNameNumber
1John Doe900
2Jane Doe1200
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.

IDNameNumber
1John Doe900
2Jane Doe1200
3Jack Doe200
4Jill Doe1400
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.

IDNameNumber
1John Doe900
2Jane Doe1200
3Jack Doe200
4Jill Doe1400
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.

html
<div class="table-responsive">
<table class="table table--striped table--hover">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
</div>

Variables

There are some defaults variables that you can configure to customize the table's look.

PreviousTypographyNextButtons