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