Tables
A table is a table, and sometimes, you just need to use a table.
Base table styling is simple using default, and if you add class .hover, your table rows will gently higlight on hover; like so:
| 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 |
Striping
By default tables will be zebra striped. To disable add class .no-stripe to your table element.
| Table Header | Table Header |
|---|---|
| Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. |
Tables HTML
<p>Base table styling is simple using default, and if you add class <code>.hover</code>, your table rows will gently higlight on hover; like so:</p>
<table class="hover">
<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>
<h3>Striping</h3>
<p>By default tables will be zebra striped. To disable add class <code>.no-stripe</code> to your <code>table</code> element.</p>
<table class="no-stripe">
<thead>
<tr>
<th width="200">Table Header</th>
<th>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>
</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>
</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>
</tr>
</tbody>
</table>
Tables Style
You can find the original source of the CSS as .scss
Tables
Have a use case that's not covered?
Please open an issue in the tracker. We'll update this living pattern library with your feedback.