Default styles
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
<table class="table">
…
</table>
Optional classes
Add any of the following classes to the .table base class.
.table-striped
Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-8).
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
<table class="table table-striped">
…
</table>
.table-bordered
Add borders and rounded corners to the table.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| Mark |
Otto |
@TwBootstrap |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
@twitter |
<table class="table table-bordered">
…
</table>
.table-hover
Enable a hover state on table rows within a <tbody>.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
@twitter |
<table class="table table-hover">
…
</table>
.table-condensed
Makes tables more compact by cutting cell padding in half.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
@twitter |
<table class="table table-condensed">
…
</table>
Optional row classes
Use contextual classes to color table rows.
| Class |
Description |
.success
|
Indicates a successful or positive action. |
.error
|
Indicates a dangerous or potentially negative action. |
.warning
|
Indicates a warning that might need attention. |
.info
|
Used as an alternative to the default styles. |
| # |
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 |
...
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
...
Supported table markup
List of supported table HTML elements and how they should be used.
| Tag |
Description |
<table>
|
Wrapping element for displaying data in a tabular format
|
<thead>
|
Container element for table header rows (<tr>) to label table columns
|
<tbody>
|
Container element for table rows (<tr>) in the body of the table
|
<tr>
|
Container element for a set of table cells (<td> or <th>) that appears on a single row
|
<td>
|
Default table cell
|
<th>
|
Special table cell for column (or row, depending on scope and placement) labels
|
<caption>
|
Description or summary of what the table holds, especially useful for screen readers
|
<table>
<caption>...</caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>