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>
…
</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-IE8).
|
#
|
First Name
|
Last Name
|
Username
|
|
1
|
Mark
|
Otto
|
@mdo
|
|
2
|
Jacob
|
Thornton
|
@fat
|
|
3
|
Larry
|
the Bird
|
@twitter
|
<table>
…
</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>
…
</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>
…
</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>
…
</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) 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>
English
Francais
Espanol
Hoodie With Patch Logo
Blue
1 × $99.90
