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>

New in v3. Use the table--bordered class to draw a border around every cell.

<table class="table table--bordered">
    ...
</table>

New in v3. Browsers center the table cells vertically by default. Many designs align them to the top for long content (set 'vertical-align': top in the $table map); in that case, use table--middle to center the cells of a specific table.

<table class="table table--middle">
    ...
</table>

New in v3. Use the table--sticky-header class inside a scrolling container to keep the header row visible. The header gets the heading-background table color (or the page background).

<div style="max-block-size: 20rem; overflow: auto;">
    <table class="table table--sticky-header">
        ...
    </table>
</div>

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>

You can configure the table’s look through the $table map and the table colors:

@use 'sprucecss/scss/spruce' with (
  $colors: (
    'table': (
      'heading-background': hsl(220deg 20% 96%),
    ),
  ),
  $table: (
    'border-width': 1px,
    'caption-text-align': start,
    'heading-font-size': 0.75rem,
    'heading-font-weight': 700,
    'heading-letter-spacing': 0.05em,
    'heading-text-transform': uppercase,
    'vertical-align': middle,
  ),
);

• Color variables
• Table variables

Use the generate-table mixin to apply the table styles to another selector, like every table in your content:

@include generate-table('.post-content table', $has-variations: false, $has-responsive-table: false);