3 #permalink Tables
For basic styling—light padding and only horizontal dividers—add the base class .table
to any <table>
.
3.1 #permalink Table styles
We've removed the additional bootstrap table styles and made all tables striped, so only use .table or .table-hover.
Examples
Default styling
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | mark.otto |
2 | Jacob | Thornton | jacob.thornton |
3 | Larry | Bird | larry.bird |
.table-hover
Enable a hover state on table rows. Add hover effect for tables that have actions for each row, or could do with some additional visual aid.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | mark.otto |
2 | Jacob | Thornton | jacob.thornton |
3 | Larry | Bird | larry.bird |
.table-collapse
A responsive table using data attribute magic.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | mark.otto |
2 | Jacob | Thornton | jacob.thornton |
3 | Larry | Bird | larry.bird |
.table-nolines
Removes all backgroud shading and lines.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | mark.otto |
2 | Jacob | Thornton | jacob.thornton |
3 | Larry | Bird | larry.bird |
<table class="table [modifier class]">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="#">1</td>
<td data-th="First Name">Mark</td>
<td data-th="Last Name">Otto</td>
<td data-th="Username">mark.otto</td>
</tr>
<tr>
<td data-th="#">2</td>
<td data-th="First Name">Jacob</td>
<td data-th="Last Name">Thornton</td>
<td data-th="Username">jacob.thornton</td>
</tr>
<tr>
<td data-th="#">3</td>
<td data-th="First Name">Larry</td>
<td data-th="Last Name">Bird</td>
<td data-th="Username">larry.bird</td>
</tr>
</tbody>
</table>
3.2 #permalink Backgrounds
Use contextual classes to color table rows.
Example
# | Product | Payment Taken | Status |
---|---|---|---|
1 | TB - Monthly | 01/04/2012 | Approved |
2 | TB - Monthly | 02/04/2012 | Declined |
3 | TB - Monthly | 03/04/2012 | Pending |
4 | TB - Monthly | 04/04/2012 | Call in to confirm |
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Product</th>
<th>Payment Taken</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
<tr class="error">
<td>2</td>
<td>TB - Monthly</td>
<td>02/04/2012</td>
<td>Declined</td>
</tr>
<tr class="warning">
<td>3</td>
<td>TB - Monthly</td>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
<tr class="info">
<td>4</td>
<td>TB - Monthly</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody>
</table>
Examples
Default styling
Table Title
# | Product | Payment Taken | |
---|---|---|---|
TB - Monthly | 01/04/2012 | ||
TB - Monthly | 02/04/2012 | ||
TB - Monthly | 03/04/2012 | ||
TB - Monthly | 04/04/2012 |
.table-extra
Vertical aligns all rows and removes margin from buttons.
Table Title
# | Product | Payment Taken | |
---|---|---|---|
TB - Monthly | 01/04/2012 | ||
TB - Monthly | 02/04/2012 | ||
TB - Monthly | 03/04/2012 | ||
TB - Monthly | 04/04/2012 |
.has-title
Adds blue border to top of table, expecting a title to be above it.
<h4 class="table-title">Table Title</h4>
<table class="table [modifier class]">
<thead>
<tr>
<th>#</th>
<th>Product</th>
<th>Payment Taken</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="http://lorempixel.com/50/50/"></td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>
<div class="btn-row">
<a href="#" class="btn btn-primary btn-sm">Button</a>
</div>
</td>
</tr>
<tr>
<td><img src="http://lorempixel.com/50/50/"></td>
<td>TB - Monthly</td>
<td>02/04/2012</td>
<td>
<div class="btn-row">
<a href="#" class="btn btn-primary btn-sm">Button</a>
</div>
</td>
</tr>
<tr>
<td><img src="http://lorempixel.com/50/50/"></td>
<td>TB - Monthly</td>
<td>03/04/2012</td>
<td>
<div class="btn-row">
<a href="#" class="btn btn-primary btn-sm">Button</a>
</div>
</td>
</tr>
<tr>
<td><img src="http://lorempixel.com/50/50/"></td>
<td>TB - Monthly</td>
<td>04/04/2012</td>
<td>
<div class="btn-row">
<a href="#" class="btn btn-primary btn-sm">Button</a>
</div>
</td>
</tr>
</tbody>
</table>
Example
Table Title
Product One | Product Two | |
---|---|---|
Package | ||
Product Name | Item One | Item Two |
Outdoor unit | ||
ErP Efficiency Rating | Item One | Item Two |
ErP Efficiency Rating | Item One | Item Two |
<h4 class="table-title">Table Title</h4>
<table class="table table-technical">
<thead>
<tr>
<th></th>
<th>Product One</th>
<th>Product Two</th>
</tr>
</thead>
<tbody>
<tr class='table-row--blue'>
<th>
<strong>Package</strong>
</th>
<td data-th="1">
</td>
<td data-th="2">
</td>
</tr>
<tr>
<tr>
<th>
<strong>Product Name</strong>
</th>
<td data-th="1">
Item One
</td>
<td data-th="2">
Item Two
</td>
</tr>
<tr class='table-row--blue'>
<th>
<strong>Outdoor unit</strong>
</th>
<td data-th="1" >
</td>
<td data-th="2">
</td>
</tr>
<tr>
<th>
<strong>ErP Efficiency Rating</strong>
</th>
<td data-th="1" data-attribute="ErP Efficiency Rating">
Item One
</td>
<td data-th="1" data-attribute="ErP Efficiency Rating">
Item Two
</td>
</tr>
<tr>
<th>
<strong>ErP Efficiency Rating</strong>
</th>
<td data-th="1" data-attribute="ErP Efficiency Rating">
Item One
</td>
<td data-th="1" data-attribute="ErP Efficiency Rating">
Item Two
</td>
</tr>
</tbody>
</table>