#Table

Cirrus adds a clean look to any table. Just add the table class to your table element.

#Basic

Below is a simple table that consists of both a header and a footer. Titles that have an abbr element are underlined with a dotted line.

T1	T2	T3	Notes
T1	T2	T3	Notes
1	Row:1 Cell:1	Row:1 Cell:2	Row:1 Cell:3
2	Row:2 Cell:1	Row:2 Cell:2	Row:2 Cell:3
3	Row:3 Cell:1	Row:3 Cell:2	Row:3 Cell:3

Structure

table
- thead
- tfoot
- tbody
  - tr

<table class="table">
    <thead>
        <tr>
            <th><abbr title="Title1">T1</abbr></th>
            <th><abbr title="Title2">T2</abbr></th>
            <th><abbr title="Title3">T3</abbr></th>
            <th>Notes</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th><abbr title="Title1">T1</abbr></th>
            <th><abbr title="Title2">T2</abbr></th>
            <th><abbr title="Title3">T3</abbr></th>
            <th>Notes</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th>1</th>
            <td>Row:1 Cell:1</td>
            <td>Row:1 Cell:2</td>
            <td>Row:1 Cell:3</td>
        </tr>
        <tr>
            <th>2</th>
            <td>Row:2 Cell:1</td>
            <td>Row:2 Cell:2</td>
            <td>Row:2 Cell:3</td>
        </tr>
        <tr>
            <th>3</th>
            <td>Row:3 Cell:1</td>
            <td>Row:3 Cell:2</td>
            <td>Row:3 Cell:3</td>
        </tr>
    </tbody>
</table>

To mark a row as selected, add the selected class to that row.

T1	T2	T3	T4	T5	S	Notes
T1	T2	T3	T4	T5	S	Notes
1	Row:1 Cell:1	Row:1 Cell:2	Row:1 Cell:3	Row:1 Cell:4	S	Row:1 Cell:5
2	Row:2 Cell:1	Row:2 Cell:2	Row:2 Cell:3	Row:2 Cell:4	S	Row:2 Cell:5
3	Row:3 Cell:1	Row:3 Cell:2	Row:3 Cell:3	Row:3 Cell:4	S	Row:3 Cell:5
4	Row:4 Cell:1	Row:4 Cell:2	Row:4 Cell:3	Row:4 Cell:4	S	Row:4 Cell:5
5	Row:5 Cell:1	Row:5 Cell:2	Row:5 Cell:3	Row:5 Cell:4	S	Row:5 Cell:5
6	Row:6 Cell:1	Row:6 Cell:2	Row:6 Cell:3	Row:6 Cell:4	S	Row:6 Cell:5

<table class="table">
    <thead>
        <tr>
            <th><abbr title="Title1">T1</abbr></th>
            <th><abbr title="Title2">T2</abbr></th>
            <th><abbr title="Title3">T3</abbr></th>
            <th><abbr title="Title4">T4</abbr></th>
            <th><abbr title="Title5">T5</abbr></th>
            <th><abbr title="Short">S</abbr></th>
            <th>Notes</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th><abbr title="Title1">T1</abbr></th>
            <th><abbr title="Title2">T2</abbr></th>
            <th><abbr title="Title3">T3</abbr></th>
            <th><abbr title="Title4">T4</abbr></th>
            <th><abbr title="Title5">T5</abbr></th>
            <th><abbr title="Short">S</abbr></th>
            <th>Notes</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th>1</th>
            <td>Row:1 Cell:1</td>
            <td>Row:1 Cell:2</td>
            <td>Row:1 Cell:3</td>
            <td>Row:1 Cell:4</td>
            <td>S</td>
            <td>Row:1 Cell:5</td>
        </tr>
        <tr>
            <th>2</th>
            <td>Row:2 Cell:1</td>
            <td>Row:2 Cell:2</td>
            <td>Row:2 Cell:3</td>
            <td>Row:2 Cell:4</td>
            <td>S</td>
            <td>Row:2 Cell:5</td>
        </tr>
        <tr class="selected">
            <th>3</th>
            <td>Row:3 Cell:1</td>
            <td>Row:3 Cell:2</td>
            <td>Row:3 Cell:3</td>
            <td>Row:3 Cell:4</td>
            <td>S</td>
            <td>Row:3 Cell:5</td>
        </tr>
        <tr>
            <th>4</th>
            <td>Row:4 Cell:1</td>
            <td>Row:4 Cell:2</td>
            <td>Row:4 Cell:3</td>
            <td>Row:4 Cell:4</td>
            <td>S</td>
            <td>Row:4 Cell:5</td>
        </tr>
        <tr>
            <th>5</th>
            <td>Row:5 Cell:1</td>
            <td>Row:5 Cell:2</td>
            <td>Row:5 Cell:3</td>
            <td>Row:5 Cell:4</td>
            <td>S</td>
            <td>Row:5 Cell:5</td>
        </tr>
        <tr>
            <th>6</th>
            <td>Row:6 Cell:1</td>
            <td>Row:6 Cell:2</td>
            <td>Row:6 Cell:3</td>
            <td>Row:6 Cell:4</td>
            <td>S</td>
            <td>Row:6 Cell:5</td>
        </tr>
    </tbody>
</table>

#Styles

Tables also come in alternate styles.

Bordered

Tables and table entries have borders on all sides. Add the bordered class to the table.

T1	T2	T3	T4	T5	S	Notes
T1	T2	T3	T4	T5	S	Notes
1	Row:1 Cell:1	Row:1 Cell:2	Row:1 Cell:3	Row:1 Cell:4	S	Row:1 Cell:5
2	Row:2 Cell:1	Row:2 Cell:2	Row:2 Cell:3	Row:2 Cell:4	S	Row:2 Cell:5
3	Row:3 Cell:1	Row:3 Cell:2	Row:3 Cell:3	Row:3 Cell:4	S	Row:3 Cell:5
4	Row:4 Cell:1	Row:4 Cell:2	Row:4 Cell:3	Row:4 Cell:4	S	Row:4 Cell:5
5	Row:5 Cell:1	Row:5 Cell:2	Row:5 Cell:3	Row:5 Cell:4	S	Row:5 Cell:5
6	Row:6 Cell:1	Row:6 Cell:2	Row:6 Cell:3	Row:6 Cell:4	S	Row:6 Cell:5

Borderless

Tables have no borders. Add the borderless class to the table.

T1	T2	T3	T4	T5	S	Notes
T1	T2	T3	T4	T5	S	Notes
1	Row:1 Cell:1	Row:1 Cell:2	Row:1 Cell:3	Row:1 Cell:4	S	Row:1 Cell:5
2	Row:2 Cell:1	Row:2 Cell:2	Row:2 Cell:3	Row:2 Cell:4	S	Row:2 Cell:5
3	Row:3 Cell:1	Row:3 Cell:2	Row:3 Cell:3	Row:3 Cell:4	S	Row:3 Cell:5
4	Row:4 Cell:1	Row:4 Cell:2	Row:4 Cell:3	Row:4 Cell:4	S	Row:4 Cell:5
5	Row:5 Cell:1	Row:5 Cell:2	Row:5 Cell:3	Row:5 Cell:4	S	Row:5 Cell:5
6	Row:6 Cell:1	Row:6 Cell:2	Row:6 Cell:3	Row:6 Cell:4	S	Row:6 Cell:5

Compact

A compact table can be created by adding the small class to the table. The rows aremore compact than the regular design.

T1	T2	T3	T4	T5	S	Notes
T1	T2	T3	T4	T5	S	Notes
1	Row:1 Cell:1	Row:1 Cell:2	Row:1 Cell:3	Row:1 Cell:4	S	Row:1 Cell:5
2	Row:2 Cell:1	Row:2 Cell:2	Row:2 Cell:3	Row:2 Cell:4	S	Row:2 Cell:5
3	Row:3 Cell:1	Row:3 Cell:2	Row:3 Cell:3	Row:3 Cell:4	S	Row:3 Cell:5
4	Row:4 Cell:1	Row:4 Cell:2	Row:4 Cell:3	Row:4 Cell:4	S	Row:4 Cell:5
5	Row:5 Cell:1	Row:5 Cell:2	Row:5 Cell:3	Row:5 Cell:4	S	Row:5 Cell:5
6	Row:6 Cell:1	Row:6 Cell:2	Row:6 Cell:3	Row:6 Cell:4	S	Row:6 Cell:5

Striped

A table with an alternating pattern. Add the striped class to the table.

T1	T2	T3	T4	T5	S	Notes
T1	T2	T3	T4	T5	S	Notes
1	Row:1 Cell:1	Row:1 Cell:2	Row:1 Cell:3	Row:1 Cell:4	S	Row:1 Cell:5
2	Row:2 Cell:1	Row:2 Cell:2	Row:2 Cell:3	Row:2 Cell:4	S	Row:2 Cell:5
3	Row:3 Cell:1	Row:3 Cell:2	Row:3 Cell:3	Row:3 Cell:4	S	Row:3 Cell:5
4	Row:4 Cell:1	Row:4 Cell:2	Row:4 Cell:3	Row:4 Cell:4	S	Row:4 Cell:5
5	Row:5 Cell:1	Row:5 Cell:2	Row:5 Cell:3	Row:5 Cell:4	S	Row:5 Cell:5
6	Row:6 Cell:1	Row:6 Cell:2	Row:6 Cell:3	Row:6 Cell:4	S	Row:6 Cell:5

Fixed Header

Implementation is slightly different for this table. Add the fixed-head class to the table. You must also set the height of the tbody of the table:

.table.fixed-head tbody {
    height: your-height;
}

T1	T2	T3	T4	T5	S	Notes
T1	T2	T3	T4	T5	S	Notes
1	Row:1 Cell:1	Row:1 Cell:2	Row:1 Cell:3	Row:1 Cell:4	S	Row:1 Cell:5
2	Row:2 Cell:1	Row:2 Cell:2	Row:2 Cell:3	Row:2 Cell:4	S	Row:2 Cell:5
3	Row:3 Cell:1	Row:3 Cell:2	Row:3 Cell:3	Row:3 Cell:4	S	Row:3 Cell:5
4	Row:4 Cell:1	Row:4 Cell:2	Row:4 Cell:3	Row:4 Cell:4	S	Row:4 Cell:5
5	Row:5 Cell:1	Row:5 Cell:2	Row:5 Cell:3	Row:5 Cell:4	S	Row:5 Cell:5
6	Row:6 Cell:1	Row:6 Cell:2	Row:6 Cell:3	Row:6 Cell:4	S	Row:6 Cell:5

#Table Container

Tables with lots of columns can get cluttered very quickly, especially on smaller devices. You can wrap your table using the table-container class to make your table horizontally scrollable so large tables don't explode out of your current layout.

Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header
Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<div class="table-container">
    <table>
        <!-- content -->
    </table>
</div>

Cirrus