#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.

T1T2T3Notes
T1T2T3Notes
1Row:1 Cell:1Row:1 Cell:2Row:1 Cell:3
2Row:2 Cell:1Row:2 Cell:2Row:2 Cell:3
3Row:3 Cell:1Row:3 Cell:2Row:3 Cell:3
Structure
  • table
    • thead
    • tfoot
    • tbody
      • tr
        • th
        • td
<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.

T1T2T3T4T5SNotes
T1T2T3T4T5SNotes
1Row:1 Cell:1Row:1 Cell:2Row:1 Cell:3Row:1 Cell:4SRow:1 Cell:5
2Row:2 Cell:1Row:2 Cell:2Row:2 Cell:3Row:2 Cell:4SRow:2 Cell:5
3Row:3 Cell:1Row:3 Cell:2Row:3 Cell:3Row:3 Cell:4SRow:3 Cell:5
4Row:4 Cell:1Row:4 Cell:2Row:4 Cell:3Row:4 Cell:4SRow:4 Cell:5
5Row:5 Cell:1Row:5 Cell:2Row:5 Cell:3Row:5 Cell:4SRow:5 Cell:5
6Row:6 Cell:1Row:6 Cell:2Row:6 Cell:3Row:6 Cell:4SRow: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.

T1T2T3T4T5SNotes
T1T2T3T4T5SNotes
1Row:1 Cell:1Row:1 Cell:2Row:1 Cell:3Row:1 Cell:4SRow:1 Cell:5
2Row:2 Cell:1Row:2 Cell:2Row:2 Cell:3Row:2 Cell:4SRow:2 Cell:5
3Row:3 Cell:1Row:3 Cell:2Row:3 Cell:3Row:3 Cell:4SRow:3 Cell:5
4Row:4 Cell:1Row:4 Cell:2Row:4 Cell:3Row:4 Cell:4SRow:4 Cell:5
5Row:5 Cell:1Row:5 Cell:2Row:5 Cell:3Row:5 Cell:4SRow:5 Cell:5
6Row:6 Cell:1Row:6 Cell:2Row:6 Cell:3Row:6 Cell:4SRow:6 Cell:5
Borderless

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

T1T2T3T4T5SNotes
T1T2T3T4T5SNotes
1Row:1 Cell:1Row:1 Cell:2Row:1 Cell:3Row:1 Cell:4SRow:1 Cell:5
2Row:2 Cell:1Row:2 Cell:2Row:2 Cell:3Row:2 Cell:4SRow:2 Cell:5
3Row:3 Cell:1Row:3 Cell:2Row:3 Cell:3Row:3 Cell:4SRow:3 Cell:5
4Row:4 Cell:1Row:4 Cell:2Row:4 Cell:3Row:4 Cell:4SRow:4 Cell:5
5Row:5 Cell:1Row:5 Cell:2Row:5 Cell:3Row:5 Cell:4SRow:5 Cell:5
6Row:6 Cell:1Row:6 Cell:2Row:6 Cell:3Row:6 Cell:4SRow: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.

T1T2T3T4T5SNotes
T1T2T3T4T5SNotes
1Row:1 Cell:1Row:1 Cell:2Row:1 Cell:3Row:1 Cell:4SRow:1 Cell:5
2Row:2 Cell:1Row:2 Cell:2Row:2 Cell:3Row:2 Cell:4SRow:2 Cell:5
3Row:3 Cell:1Row:3 Cell:2Row:3 Cell:3Row:3 Cell:4SRow:3 Cell:5
4Row:4 Cell:1Row:4 Cell:2Row:4 Cell:3Row:4 Cell:4SRow:4 Cell:5
5Row:5 Cell:1Row:5 Cell:2Row:5 Cell:3Row:5 Cell:4SRow:5 Cell:5
6Row:6 Cell:1Row:6 Cell:2Row:6 Cell:3Row:6 Cell:4SRow:6 Cell:5
Striped

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

T1T2T3T4T5SNotes
T1T2T3T4T5SNotes
1Row:1 Cell:1Row:1 Cell:2Row:1 Cell:3Row:1 Cell:4SRow:1 Cell:5
2Row:2 Cell:1Row:2 Cell:2Row:2 Cell:3Row:2 Cell:4SRow:2 Cell:5
3Row:3 Cell:1Row:3 Cell:2Row:3 Cell:3Row:3 Cell:4SRow:3 Cell:5
4Row:4 Cell:1Row:4 Cell:2Row:4 Cell:3Row:4 Cell:4SRow:4 Cell:5
5Row:5 Cell:1Row:5 Cell:2Row:5 Cell:3Row:5 Cell:4SRow:5 Cell:5
6Row:6 Cell:1Row:6 Cell:2Row:6 Cell:3Row:6 Cell:4SRow: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;
}
T1T2T3T4T5SNotes
T1T2T3T4T5SNotes
1Row:1 Cell:1Row:1 Cell:2Row:1 Cell:3Row:1 Cell:4SRow:1 Cell:5
2Row:2 Cell:1Row:2 Cell:2Row:2 Cell:3Row:2 Cell:4SRow:2 Cell:5
3Row:3 Cell:1Row:3 Cell:2Row:3 Cell:3Row:3 Cell:4SRow:3 Cell:5
4Row:4 Cell:1Row:4 Cell:2Row:4 Cell:3Row:4 Cell:4SRow:4 Cell:5
5Row:5 Cell:1Row:5 Cell:2Row:5 Cell:3Row:5 Cell:4SRow:5 Cell:5
6Row:6 Cell:1Row:6 Cell:2Row:6 Cell:3Row:6 Cell:4SRow: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.

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