Tables
Simple table form bootstrapBasic 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 | def@somemail.com |
| Success | Doe | john@example.com |
| Danger | Moe | mary@example.com |
| Info | Dooley | july@example.com |
| Warning | Refs | bo@example.com |
| Active | Activeson | act@example.com |
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 | naeem@gmail.com | 30.05.1016 | 10.06.2016 | 10.06.2016 | Complete | $43 | |
|
|
JS325 | Naeem Khan | Thememinister@gmail.com | 30.05.1016 | 10.06.2016 | 10.06.2016 | Complete | $43 | |
|
|
JS325 | Mark | admin@gmail.com | 30.05.1016 | 10.06.2016 | 10.06.2016 | Complete | $43 | |
|
|
JS325 | Abraham | admin@gmail.com | 30.05.1016 | 10.06.2016 | 10.06.2016 | Complete | $43 | |
|
|
JS325 | Colleen Hurst | admin@gmail.com | 30.05.1016 | 10.06.2016 | 10.06.2016 | Complete | $43 | |
|
|
JS325 | Ashton Cox | admin@gmail.com | 30.05.1016 | 10.06.2016 | 10.06.2016 | Complete | $43 |