Default with only tableclass
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
With.table-dark
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
Table head options
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
Striped rows
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
With table table-striped table-dark
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
Bordered table
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Mark |
Otto |
@TwBootstrap |
| 3 |
Jacob |
Thornton |
@fat |
| 4 |
Larry the Bird |
@twitter |
Borderless table
| # |
First |
Last |
Handle |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
@twitter |
.table-borderless can also be used on dark tables.
| # |
First |
Last |
Handle |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
@twitter |
Hoverable rows
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
@twitter |
Small table
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
@twitter |
Contextual classes
| Type |
Column heading |
Column heading |
Column heading |
| Active |
Column content |
Column content |
Column content |
| Default |
Column content |
Column content |
Column content |
| Primary |
Column content |
Column content |
Column content |
| Secondary |
Column content |
Column content |
Column content |
| Success |
Column content |
Column content |
Column content |
| Danger |
Column content |
Column content |
Column content |
| Warning |
Column content |
Column content |
Column content |
| Info |
Column content |
Column content |
Column content |
| Light |
Column content |
Column content |
Column content |
| Dark |
Column content |
Column content |
Column content |
Responsive tables
| # |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
| 1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| # |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
| 1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Use .table-responsive{-sm|-md|-lg|-xl}
| # |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
| 1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| # |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
| 1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| # |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
| 1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| # |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
| 1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |