# 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

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

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

Borderless

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

Compact

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

Striped

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

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;
}

• Previous

  Lists

• Next

  Utils