Table
Easily create nicely looking tables, which come in different styles.
Usage
To apply this component, add the .f-table
class to a table. The table rows will be separated by lines.
Example
Table Heading | Table Heading | Table Heading |
---|---|---|
Table Footer | Table Footer | Table Footer |
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Markup
<table class="f-table">
<caption>...</caption>
<thead>
<tr>
<th>...</th>
</tr>
</thead>
<tfoot>
<tr>
<td>...</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>...</td>
</tr>
</tbody>
</table>
Columns
To modify the column width or content, you can use other components. Here are some useful examples:
Style | Description |
---|---|
Column width | Add one of the .f-width-* classes from the Grid component. |
Text alignment | Add the .f-text-left , .f-text-right or .f-text-center class from the Text component. |
Text style | Take a look at the Text component. For example add the .f-text-bold class. |
Markup
<td class="f-width-1-10 f-text-right">...</td>
<td class="f-width-9-10 f-text-bold">...</td>
Vertical modifier
To vertically center table content, just add the .f-table-middle
class to the <tr>
or <td>
elements.
Modifiers
To display the table in a different style, just add a modifier to the the .f-table
class.
Table hover
Add the .f-table-hover
class to display a hover state on table rows.
Example
Table Heading | Table Heading | Table Heading |
---|---|---|
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Markup
<table class="f-table f-table-hover">...</table>
Table striped
Add zebra-striping to a table by adding the .f-table-striped
class.
Example
Table Heading | Table Heading | Table Heading |
---|---|---|
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Markup
<table class="f-table f-table-striped">...</table>
Table condensed
Add the .f-table-condensed
class to make table cells more compact.
Example
Table Heading | Table Heading | Table Heading |
---|---|---|
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Markup
<table class="f-table f-table-condensed">...</table>
Table bordered
Add the .f-table-bordered
class to display borders for all cells.
Example
Table Heading | Table Heading | Table Heading |
---|---|---|
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Markup
<table class="f-table f-table-bordered">...</table>
Table plain
Add the .f-table-plain
class to remove all borders.
Example
Table Heading | Table Heading | Table Heading |
---|---|---|
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Markup
<table class="f-table f-table-plain">...</table>
Combine modifiers
The modifiers of the Table component are combinable with each other.
Example
Table Heading | Table Heading | Table Heading |
---|---|---|
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Markup
<table class="f-table f-table-hover f-table-striped f-table-condensed">...</table>
Responsive Table
If your table happens to be wider than its container element or would eventually get too big on a specific viewport width, just wrap it inside a <div>
element and add the .f-overflow-container
class. This creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself.
Example
Table Heading | Table Heading | Table Heading | Table Heading | Table Heading | Table Heading | Table Heading | Table Heading |
---|---|---|---|---|---|---|---|
Table Footer | Table Footer | Table Footer | Table Footer | Table Footer | Table Footer | Table Footer | Table Footer |
Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data |
Markup
<div class="f-overflow-container">
<table>...</table>
</div>
Another option for mobile responsive tables is to employ the method found on TechBlog that uses data attributes on <td>
to move where the <th>
appears to sit.
Add the .f-table-responsive
class to the <table>
and data-attributes matching the column headings on each <td>
.
There is also a modifier for having the data-attribute in line with the <td>
in cases where the label or content is small enough to warrant this. Add the .f-td-responsive-inline
class to any <td>
where this is the case, or to the whole table if you would like it to happen on all <td>
elements.
Example
Payment | Issue Date | Amount | Period |
---|---|---|---|
Payment #1 | 02/01/2015 | $2,311 | 01/01/2015 - 01/31/2015 |
Payment #2 | 03/01/2015 | $3,211 | 02/01/2015 - 02/28/2015 |
Markup
<table>
<thead>
<tr>
<th>Payment</th>
<th>Issue Date</th>
<th>Amount</th>
<th>Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Payment">Payment #1</td>
<td data-label="Issue Date">02/01/2015</td>
<td data-label="Amount">$2,311</td>
<td data-label="Period">01/01/2015 - 01/31/2015</td>
</tr>
<tr>
<td data-label="Payment" class="f-td-responsive-inline">Payment #2</td>
<td data-label="Issue Date" class="f-td-responsive-inline">03/01/2015</td>
<td data-label="Amount" class="f-td-responsive-inline">$3,211</td>
<td data-label="Period" class="f-td-responsive-inline">02/01/2015 - 02/28/2015</td>
</tr>
</tbody>
</table>