Foundation
Tables
Okay, they're not the sexiest things ever, but tables get the job done (for tabular data, of course).
| Table Header | Table Header | Table Header | Table Header |
|---|---|---|---|
| Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Build With Predefined HTML Classes
Tables are built from a mixin, but since tables don't rely on any classes to build, you can use the table element and customize with your CSS. If you are using SCSS, the variables will help you customize the look and feel.
<table>
<thead>
<tr>
<th width="200">Table Header</th>
<th>Table Header</th>
<th width="150">Table Header</th>
<th width="150">Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Goes Here</td>
<td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
</tbody>
</table>Default SCSS Variables
$include-html-table-classes: $include-html-classes !default;
/* These control the background color for the table and even rows */
$table-bg: #fff;
$table-even-row-bg: #f9f9f9;
/* These control the table cell border style */
$table-border-style: solid;
$table-border-size: 1px;
$table-border-color: #ddd;
/* These control the table head styles */
$table-head-bg: #f5f5f5;
$table-head-font-size: em-calc(14);
$table-head-font-color: #222;
$table-head-font-weight: bold;
$table-head-padding: em-calc(8 10 10);
/* These control the row padding and font styles */
$table-row-padding: em-calc(9 10);
$table-row-font-size: em-calc(14);
$table-row-font-color: #222;
$table-line-height: em-calc(18);
/* These are for controlling the display and margin of tables */
$table-display: table-cell;
$table-margin-bottom: em-calc(20);Note: em-calc(); is a function we wrote to convert px to em. It is included in _variables.scss.