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 |
[table] <table> … </table> [/table]
Optional classes
Add any of the following classes to the
.tablebase class.
.table-stripedAdds zebra-striping to any table row within the
<tbody>via the:nth-childCSS selector (not available in IE7-IE8).
# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird [table type="table-striped"] <table> … </table> [/table]
.table-borderedAdd 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 [table type="table-bordered"] <table> … </table> [/table]
.table-hoverEnable 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 [table type="table-hover"] <table> … </table> [/table]
.table-condensedMakes 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 [table type="table-condensed"] <table> … </table> [/table]
Optional row classes
Use contextual classes to color table rows.
Class Description .successIndicates a successful or positive action. .errorIndicates a dangerous or potentially negative action. .warningIndicates a warning that might need attention. .infoUsed 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) labelsMust be used within a <thead><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>