Table

Overview

Applies styles to create a table.

<table class="c-table">
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
</table>

Demo on CodePen

Modifiers

Border

Name	Description
c-table--border-cells	Sets a border around all cells.
c-table--border-rows	Sets a border above all rows.

<table class="c-table c-table--border-cells">
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
</table>

Demo on CodePen

Notes

Wrap the table with the scroll behavior to allow horizontal scrolling on small screens.

<div class="b-scroll">
    <table class="c-table b-scroll__body">
        <thead>
            ...
        </thead>
        <tbody>
            ...
        </tbody>
    </table>
</div>

Demo on CodePen