Skip Navigation

Photo by Jonathan Larson  on Unsplash

Tables

Natura11y provides an assortment of style options for data tables. Including two different approaches for presenting tables on smaller viewports.

Basic Table

All that is needed for a basic data table is the .table selector present on the <table> tag.

Places with columnar jointed volcanics
NameCountryMap View
Giant's CausewayNorthern IrelandMap View
Fingal's CaveScotlandMap View
Garni GorgeArmeniaMap View
Cape RaoulTasmaniaMap View
SvartifossIcelandMap View
<table class="table">

    <caption class="screen-reader-only">
        Places with columnar jointed volcanics
    </caption>

    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Country</th>
            <th scope="col" class="text-align-right">Map View</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Giant’s Causeway</td>
            <td>Northern Ireland</td>
            <td class="text-align-right">
                <a href="#1">Map View</a>
            </td>
        </tr>
        <tr>
            <td>Fingal's Cave</td>
            <td>Scotland</td>
            <td class="text-align-right">
                <a href="#1">Map View</a>
            </td>
        </tr>
        <tr>
            <td>Garni Gorge</td>
            <td>Armenia</td>
            <td class="text-align-right">
                <a href="#1">Map View</a>
            </td>
        </tr>
        <tr>
            <td>Cape Raoul</td>
            <td>Tasmania</td>
            <td class="text-align-right">
                <a href="#1">Map View</a>
            </td>
        </tr>
        <tr>
            <td>Svartifoss</td>
            <td>Iceland</td>
            <td class="text-align-right">
                <a href="#1">Map View</a>
            </td>
        </tr>
    </tbody>

</table>
Figure 1
Line #Details
1

The parent .table selector is required.

3-5

The caption tag is recommended for accessibility. With the example, the caption is present, but visually hidden with the .screen-reader-only utility.

Edge to Edge

For an edge to edge look, include the .table--edge modifier class. This removes the left padding of the first row, and the right padding of the last row.

Places with columnar jointed volcanics
NameCountryMap View
Giant's CausewayNorthern IrelandMap View
Fingal's CaveScotlandMap View
Garni GorgeArmeniaMap View
Cape RaoulTasmaniaMap View
SvartifossIcelandMap View
<table class="table table--edge">
    ...
</table>
Figure 2

Striped Rows

For striped rows within <tbody>, include the .table--striped modifier class.

Places with columnar jointed volcanics
NameCountryMap View
Giant's CausewayNorthern IrelandMap View
Fingal's CaveScotlandMap View
Garni GorgeArmeniaMap View
Cape RaoulTasmaniaMap View
SvartifossIcelandMap View
<table class="table table--striped">
    ...
</table>
Figure 3

Table Divider

Need horizontal and vertical borders? Include the .table--divider modifier class.

Places with columnar jointed volcanics
NameCountryMap View
Giant's CausewayNorthern IrelandMap View
Fingal's CaveScotlandMap View
Garni GorgeArmeniaMap View
Cape RaoulTasmaniaMap View
SvartifossIcelandMap View
<table class="table table--divider">
    ...
</table>
Figure 4

Scrolling Tables

For smaller viewports, nest tables inside the .table-scroll component. This allows tables to scroll horizontally when the table is wider than the viewport.

Scroll to see whole table
Places with columnar jointed volcanics
NameCountryCoordinatesMap View
Giant's CausewayNorthern Ireland55°14'27"N 6°30'42"WMap View
Fingal's CaveScotland56°26'02"N 6°20'10"WMap View
Garni GorgeArmenia40°11'N 44°31'EMap View
Cape RaoulTasmania43°12'04"S 147°45'48"EMap View
SvartifossIceland64.023°N 16.975°WMap View

Consider the above table. When the viewport is smaller than assigned minimum width (800px), horizontal scrolling is activated. The assigned minimum is set with this CSS variable: --table-scroll-min-width: 800px;. This value gives you full control of when the scrolling should occur.

<div class="table-scroll">

    <small class="table-scroll__help">
        Scroll to see whole table
    </small>

    <div class="table-scroll__container">

        <table class="table">

            <caption>
                Places with columnar jointed volcanics
            </caption>

            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Country</th>
                    <th scope="col">Coordinates</th>
                    <th class="text-align-right" scope="col">
                        Map View
                    </th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>Giant's Causeway</td>
                    <td>Northern Ireland</td>
                    <td>55°14'27″N 6°30'42″W
                    </td>
                    <td class="text-align-right">
                        <a href="#1">Map View</a>
                    </td>
                </tr>
                <tr>
                    <td>Fingal's Cave</td>
                    <td>Scotland</td>
                    <td>56°26'02″N 6°20'10″W</td>
                    <td class="text-align-right">
                        <a href="#1">Map View</a>
                    </td>
                </tr>
                <tr>
                    <td>Garni Gorge</td>
                    <td>Armenia</td>
                    <td>40°11'N 44°31'E</td>
                    <td class="text-align-right">
                        <a href="#1">Map View</a>
                    </td>
                </tr>
                <tr>
                    <td>Cape Raoul</td>
                    <td>Tasmania</td>
                    <td>43°12'04″S 147°45'48″E</td>
                    <td class="text-align-right">
                        <a href="#1">Map View</a>
                    </td>
                </tr>
                <tr>
                    <td>Svartifoss</td>
                    <td>Iceland</td>
                    <td>64.023°N 16.975°W</td>
                    <td class="text-align-right">
                        <a href="#1">Map View</a>
                    </td>
                </tr>
            </tbody>

        </table>

    </div>

</div>
Figure 5

Stacking Columns

Another way to display tables for smaller viewports is to stack columns on top of one another. Stacking occurs only until the viewport reaches a specified breakpoint. At this point, the table returns to its original horizontal layout.

For stacking columns, include the .table--stack--{x} modifier to the .table selector (Figure 6, line 1). Here, x equals the breakpoint (e.g. lg for the large).

Places with columnar jointed volcanics
NameCountryCoordinatesMap View
Giant's CausewayNorthern Ireland55°14'27"N 6°30'42"WMap View
Fingal's CaveScotland56°26'02"N 6°20'10"WMap View
Garni GorgeArmenia40°11'N 44°31'EMap View
Cape RaoulTasmania43°12'04"S 147°45'48"EMap View
SvartifossIceland64.023°N 16.975°WMap View

The below example shows the same table appears on a wider (desktop) viewport.

Places with columnar jointed volcanics
NameCountryCoordinatesMap View
Giant's CausewayNorthern Ireland55°14'27"N 6°30'42"WMap View
Fingal's CaveScotland56°26'02"N 6°20'10"WMap View
Garni GorgeArmenia40°11'N 44°31'EMap View
Cape RaoulTasmania43°12'04"S 147°45'48"EMap View
SvartifossIceland64.023°N 16.975°WMap View
<table class="table table--stack--lg">

    <caption>
        Places with columnar jointed volcanics
    </caption>

    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Country</th>
            <th scope="col">Coordinates</th>
            <th class="text-align-right" scope="col">
                Map View
            </th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Giant's Causeway</td>
            <td>Northern Ireland</td>
            <td>55°14'27″N 6°30'42″W
            </td>
            <td class="text-align-right">
                <a href="#1">Map View</a>
            </td>
        </tr>
        <tr>
            <td>Fingal's Cave</td>
            <td>Scotland</td>
            <td>56°26'02″N 6°20'10″W</td>
            <td class="text-align-right">
                <a href="#1">Map View</a>
            </td>
        </tr>
        <tr>
            <td>Garni Gorge</td>
            <td>Armenia</td>
            <td>40°11'N 44°31'E</td>
            <td class="text-align-right">
                <a href="#1">Map View</a>
            </td>
        </tr>
        <tr>
            <td>Cape Raoul</td>
            <td>Tasmania</td>
            <td>43°12'04″S 147°45'48″E</td>
            <td class="text-align-right">
                <a href="#1">Map View</a>
            </td>
        </tr>
        <tr>
            <td>Svartifoss</td>
            <td>Iceland</td>
            <td>64.023°N 16.975°W</td>
            <td class="text-align-right">
                <a href="#1">Map View</a>
            </td>
        </tr>
    </tbody>

</table>
Figure 6

Related CSS Variables

Further customize Tables by redefining any of their related CSS variables as shown below.

.table {
    --table-cell-padding-x: var(--spacer-3);
    --table-cell-padding-y: 0.75em;
    --table-scroll-min-width: 800px;
}