#Placeholder
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
tabletheadtfoottbodytrthtd
<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 |