Tables

Basic Table

Sets the td & th padding to $unit

<table class="g-table">
    <tr>
        <th>First name</th>
        <th>Last name</th>
    <tr>
        <td>John</td>
        <td>Doe</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>Smith</td>
    </tr>
</table>

Padding Sizes

g-table--narrow

Sets the td & th padding to $unit_small

<table class="g-table g-table--narrow">
    <tr>
        <th>First name</th>
        <th>Last name</th>
    <tr>
        <td>John</td>
        <td>Doe</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>Smith</td>
    </tr>
</table>

g-table--wide

Sets the td & th padding to $unit_large

<table class="g-table g-table--wide">
    <tr>
        <th>First name</th>
        <th>Last name</th>
    <tr>
        <td>John</td>
        <td>Doe</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>Smith</td>
    </tr>
</table>

Modifiers

g-table--borderless

Removes default border-bottom on table rows

<table class="g-table g-table--borderless">
    <tr>
        <th>First name</th>
        <th>Last name</th>
    <tr>
        <td>John</td>
        <td>Doe</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>Smith</td>
    </tr>
</table>

g-table--fixed

Sets the table-layout property to fixed

<table class="g-table g-table--fixed">
    <tr>
        <th>First name</th>
        <th>Last name</th>
    <tr>
        <td>John</td>
        <td>Doe</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>Smith</td>
    </tr>
</table>

Styled Tables

Simple

<table class="g-table-simple">
    <thead>
        <tr class="g-table-simple__row">
            <th class="g-table-simple__cell">First Name</th>
            <th class="g-table-simple__cell">Last Name</th>
            <th class="g-table-simple__cell">Age</th>
        </tr>
    </thead>
    <tbody>
        <tr class="g-table-simple__row">
            <td class="g-table-simple__cell">Roger</td>
            <td class="g-table-simple__cell">Waters</td>
            <td class="g-table-simple__cell">73</td>
        </tr>
        <tr class="g-table-simple__row">
            <td class="g-table-simple__cell">Nick</td>
            <td class="g-table-simple__cell">Mason</td>
            <td class="g-table-simple__cell">73</td>
        </tr>
        <tr class="g-table-simple__row">
            <td class="g-table-simple__cell">David</td>
            <td class="g-table-simple__cell">Gilmour</td>
            <td class="g-table-simple__cell">71</td>
        </tr>
    </tbody>
</table>

Striped

<table class="g-table--striped">
    <thead>
        <tr class="u-bg-gray-30">
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Roger</td>
            <td>Waters</td>
            <td>73</td>
        </tr>
        <tr>
            <td>Nick</td>
            <td>Mason</td>
            <td>73</td>
        </tr>
        <tr>
            <td>David</td>
            <td>Gilmour</td>
            <td>71</td>
        </tr>
    </tbody>
</table>