Tables

Styling tables can be a major pain. Luckily, Cirrus has that covered by providing sleek, modern table designs straight out of the box. The base styling is minimal and can be customized if needed. To use Cirrus's styles, just add the table class to the table itself.

Table Outline
T1 T2 T3 Notes
T1 T2 T3 Notes
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

The tree view of a standard table in Cirrus is:

  • 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 select an item in the table, just add the .selected selector to the tr (row) you want.

T1 T2 T3 T4 T5 S Notes
T1 T2 T3 T4 T5 S Notes
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

Alternate Table Styles

Cirrus bundles a couple of alternate styles for tables shown below.

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

T1 T2 T3 T4 T5 S Notes
T1 T2 T3 T4 T5 S Notes
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.

T1 T2 T3 T4 T5 S Notes
T1 T2 T3 T4 T5 S Notes
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.

T1 T2 T3 T4 T5 S Notes
T1 T2 T3 T4 T5 S Notes
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;
}
T1 T2 T3 T4 T5 S Notes
T1 T2 T3 T4 T5 S Notes
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