Basic example
For basic styling—light padding and only horizontal dividers—add the base class .table to
any <table>. It may seem super redundant, but given the widespread use of tables for
other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Striped and hover rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
Add .table-hover to 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 |
Contextual classes
Use contextual classes to color table rows or individual cells..success
.danger.info.warning.active
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | [email protected] |
| Success | Doe | [email protected] |
| Danger | Moe | [email protected] |
| Info | Dooley | [email protected] |
| Warning | Refs | [email protected] |
| Active | Activeson | [email protected] |
Bordered table
Add .table-bordered for borders on all sides of the table and cells.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 4 | Naeem | the Bird | |
| 5 | Ashton Cox | the Bird | |
| 6 | Abraham | the Bird |
Responsive tables
Create responsive tables by wrapping any .table in .table-responsive to make them scroll
horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any
difference in these tables.
Vertical clipping/truncation
Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the
bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
| Select | Order ID | Fell Name | Place Date | Pickup Date | Delivery Date | Status | Price | Update | |
|---|---|---|---|---|---|---|---|---|---|
|
|
JS325 | Naeem Khan | [email protected] | 30.05.1016 | 10.06.2016 | 10.06.2016 | Complete | $43 | |
|
|
JS325 | Naeem Khan | [email protected] | 30.05.1016 | 10.06.2016 | 10.06.2016 | Complete | $43 | |
|
|
JS325 | Mark | [email protected] | 30.05.1016 | 10.06.2016 | 10.06.2016 | Complete | $43 | |
|
|
JS325 | Abraham | [email protected] | 30.05.1016 | 10.06.2016 | 10.06.2016 | Complete | $43 | |
|
|
JS325 | Colleen Hurst | [email protected] | 30.05.1016 | 10.06.2016 | 10.06.2016 | Complete | $43 | |
|
|
JS325 | Ashton Cox | [email protected] | 30.05.1016 | 10.06.2016 | 10.06.2016 | Complete | $43 |