Basic
Using the most basic table markup, add class .table.
| User | Role | Status | Created |
|---|---|---|---|
| Jack Nicholson | Registered | Banned | 2013/08/08 |
| Humphrey Bogart | Registered | Pending | 2013/08/08 |
| Angelina Jolie | Admin | Inactive | 2013/08/08 |
| Marlon Brando | Member | Active | 2013/08/08 |
| Kevin Spacey | Admin | Active | 2013/08/08 |
| Humphrey Bogart | Registered | Pending | 2013/08/08 |
Hover Table
Add.table-hoverto enable a hover state on table rows
within a<tbody>
| # | Products | Popularity | Sales | Position |
|---|---|---|---|---|
| 1 | Protin Powder | 5,3,9,6,5,9,7,3,5,2 | 28.76% | Down |
| 2 | Air Conditioner | 10,6,2,4,5,8,4,1,8,7 | 8.55% | Down |
| 3 | RC Cars | 2,8,3,10,7,4,9,8,4,3 | 58.56% | Up |
| 4 | Down Coat | 0,5,8,7,6,2,8,3,9,10 | 35.76% | Up |
| 5 | Android Phone | 2,4,6,4,7,6,3,6,8,10 | 21.13% | down |
| 6 | 9,6,8,3,4,6,10,7,5,9 | 26.88% | Up |
Bordered Table
Add.table-borderedfor borders on all sides of the
table and cells.
| User | Role | Status | Created |
|---|---|---|---|
| Jack Nicholson | Registered | Banned | 2013/08/08 |
| Humphrey Bogart | Registered | Pending | 2013/08/08 |
| Angelina Jolie | Admin | Inactive | 2013/08/08 |
| Marlon Brando | Member | Active | 2013/08/08 |
| Kevin Spacey | Admin | Active | 2013/08/08 |
| Humphrey Bogart | Registered | Pending | 2013/08/08 |
Condensed Table
You can also make your tables more compact and save the space through adding an extra class .table-condensed to the .table base class. The class .table-condensed makes the table compact by cutting the cell padding in half.
| Invoice | Username | Amount | Date |
|---|---|---|---|
| Order #53451 | Mary Adams | $24.98 | 2015/7/26 |
| Order #53452 | Caleb Richards | $564.00 | 2015/7/15 |
| Order #53453 | June Lane | $58.87 | 2015/7/01 |
| Order #53454 | Crystal Bates | $97.50 | 2015/6/26 |
| Order #53455 | Heather Harper | $249.99 | 2015/6/09 |
| Order #53456 | Willard Wood | $24.98 | 2015/6/01 |
Striped Rows
You can create table with alternate background like zebra-stripes by simply adding the Bootstrap's class .table-striped to the .table base class.
This is achieved by adding the background-color to the table row within <tbody> element via the :nth-child CSS selector (not supported in IE7-8).
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | @fb |
| 4 | Pery | the Bird | @our |
| 5 | John | Due |
Table Selectable
| Id | Project | Status | Action | |
|---|---|---|---|---|
| 619 | The Process Resources | Developing | ||
| 620 | Lunar probe project | Design | ||
| 621 | Dream successful plan | Testing | ||
| 622 | Office automatization | Canceled | ||
| 623 | Open strategy | Reply waiting |
Responsive
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.
| # | 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 |
Contextual Classes
Use classes( .active, .success, .info,
.warning, .danger ) to color table rows
or individual cells.
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |