Penguin

Table

A classic. A table displays a collections of tabular data grouped into rows and cols.

##table simple

# Table heading Table heading Table heading Table heading
table footer
1 Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell
4 Table cell Table cell Table cell Table cell
5 Table cell Table cell Table cell Table cell
<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="5">table footer</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td><a href="">1</a></td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        <tr>
            <td><a href="">2</a></td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        <tr><td><a href="">3</a></td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        <tr><td><a href="">4</a></td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        <tr><td><a href="">5</a></td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
    </tbody>
</table>

##table stacked

Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
table footer
Cell 1.1 Cell 1.2 Cell 1.3 Cell 1.4 Cell 1.5
Cell 2.1 Cell 2.2 Cell 2.3 Cell 2.4 Cell 2.5
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
table footer
Cell 1.1 Cell 1.2 Cell 1.3 Cell 1.4 Cell 1.5
Cell 2.1 Cell 2.2 Cell 2.3 Cell 2.4 Cell 2.5
<table class="table table--stacked">
    <thead>
        <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
            <th>Heading 4</th>
            <th>Heading 5</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="5">table footer</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td data-header="Heading 1"><a href="">Cell 1.1</a></td>
            <td data-header="Heading 2">Cell 1.2</td>
            <td data-header="Heading 3">Cell 1.3</td>
            <td data-header="Heading 4">Cell 1.4</td>
            <td data-header="Heading 5">Cell 1.5</td>
        </tr>
        <tr>
            <td data-header="Heading 1"><a href="">Cell 2.1</a></td>
            <td data-header="Heading 2">Cell 2.2</td>
            <td data-header="Heading 3">Cell 2.3</td>
            <td data-header="Heading 4">Cell 2.4</td>
            <td data-header="Heading 5">Cell 2.5</td>
        </tr>
    </tbody>
</table>

##responsive

You can get more info about $slicer-breakpoints and $slicer-breakpoint-names in grid components section.

// Breakpoints
$slicer-breakpoints       : 0   400px   600px   800px   1050px;
$slicer-breakpoint-names  :  'a'     'b'     'c'     'd'      'e';

To use this component in a responsive project you have different options:

Breakpoint-slicer:

.table {
    // Common styles

    @include to(c) {
        @include table--stacked;
    }

}

Default media query:

.table {
    //Common styles

    @media (max-width: 799px) {
        @include table--stacked;
    }

}

@include media-minwidth, a penguin mixin:

.table {
    @include table--stacked;

    @include media-minwidth('d') {
        // Custom styles
    }
}

##custom table

You can create your own custom table.

.table--custom {
    @include table--stacked;
    // Custom styles
}