Tables

Spruce ships with some basic table styling targeted only with classes to opt-in.

Use the table class on an HTML <table> element to use the default styling.

<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 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).

<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>

Use the table--clear-border class on a <table> to remove the default border style.

<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>

Use the table--sm class on a <table> to make it smaller.

<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>

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.

<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>

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.

<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>

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.

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

<div class="table-responsive" style="--inline-size: 20rem;">
    <table class="table">
        ...
    </table>
</div>

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

• Color variables
• Display variables