Basic
Add class .table.
| # | First Name | Last Name | Username | Role |
|---|---|---|---|---|
| 1 | Teagan | Prohaska | @Elijah | admin |
| 2 | Andy | Gaylord | @Ramiro | member |
| 3 | Veronica | Gusikowski | @Maxime | developer |
| 4 | Bruce | Rogahn | @Maggio | supporter |
| 5 | Carolina | Hickle | @Hammes | member |
| 6 | Madaline | Eichmann | @Amaya | supporter |
Hover Table
Add.table-hoverto enable a hover state on table rows
within a<tbody>
| # | Products | Popularity | Sales |
|---|---|---|---|
| 1 | Milk Powder | 5,3,2,-1,-3,-2,2,3,4,1 | 28.76% |
| 2 | Air Conditioner | 1,-1,-2,1,2,1,0,1,3,2 | 8.55% |
| 3 | RC Cars | 3,2,3,-1,-3,-1,0,2,4,5 | 58.56% |
| 4 | Down Coat | 1,-2,0,2,4,5,3,2,3,5 | 35.76% |
| 5 | SLR Camera | 1,-1,0,2,3,1,-1,1,4,2 | 21.13% |
| 6 | Jacket | 4,2,-1,-3,-2,1,3,5,2,4 | 26.88% |
Bordered Table
Add.table-borderedfor borders on all sides of the
table and cells.
| Task | Progress | Deadline | Action |
|---|---|---|---|
| Lunar probe project |
|
May 15, 2015 | |
| Dream successful plan |
|
July 1, 2015 | |
| Office automatization |
|
Apr 12, 2015 | |
| The sun climbing plan |
|
Aug 9, 2015 | |
| Open strategy |
|
Apr 2, 2015 | |
| Tantas earum numeris |
|
July 11, 2015 |
Striped Rows
Use.table-stripedto add zebra-striping to any table
row within the<tbody>.Striped tables are styled
via the:nth-childCSS selector, which is not available
in Internet Explorer 8.
| Order ID | Username | Payment | Amount |
|---|---|---|---|
| 2569 | @Jessica | Credit Card | $256.10 |
| 4582 | @William | Paypal | $96.75 |
| 2563 | @Jennifer | Credit Card | $458.00 |
| 4378 | @Rolando | Paypal | $30.25 |
| 8465 | @Katelin | Credit Card | $158.50 |
| 1526 | @Richard | Paypal | $58.80 |
Condensed Table
Add.table-condensedto make tables more compact by
cutting 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 |
Table Section
| Project | Progress | Date | |
|---|---|---|---|
| Project #25369 | Canceled | July 10, 2015 | |
| ##MODULE-1111 | Done | July 27, 2015 | |
| ##MODULE-723 | Done | July 7, 2015 | |
| ##MODULE-4200c | Done | July 12, 2015 | |
| Project #28686 | Testing | July 12, 2015 | |
| ##MODULE-3100c | Doing | July 25, 2015 | |
| ##MODULE-6400 | Done | July 24, 2015 | |
| ##MODULE-2210 | Done | July 22, 2015 | |
| Project #29587 | Developing | July 15, 2015 | |
| ##MODULE-7400 | Done | July 2, 2015 | |
| ##MODULE-510c | Done | July 3, 2015 | |
| ##MODULE-3a00 | Done | July 17, 2015 |
Table Selectable
| Id | Project | Status | Progress | |
|---|---|---|---|---|
| 619 | The sun climbing plan | Developing | 5,3,2,-1,-3,-2,2,3,5,2 | |
| 620 | Lunar probe project | Design | 1,-1,0,2,3,1,-1,1,4,2 | |
| 621 | Dream successful plan | Testing | 2,3,-1,-3,-1,0,2,4,5,3 | |
| 622 | Office automatization | Canceled | 1,-2,0,2,4,5,3,2,4,2 | |
| 623 | Open strategy | Reply waiting | 4,2,-1,-3,-2,1,3,5,2,4 |
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.
| Invoice | User | Date | Amount | Status | Country |
|---|---|---|---|---|---|
| Order #26589 | Herman Beck | Oct 16, 2015 | $45.00 |
Paid
|
EN |
| Order #58746 | Mary Adams | Oct 12, 2015 | $245.30 |
Shipped
|
CN |
| Order #98458 | Caleb Richards | May 18, 2015 | $38.00 |
Shipped
|
AU |
| Order #32658 | June Lane | Apr 28, 2015 | $77.99 |
Paid
|
FR |
Contextual Classes
Use classes( .active, .success, .info,
.warning, .danger ) to color table rows
or individual cells.
| Order ID | Order note | Product | Buyer | payment | Date |
|---|---|---|---|---|---|
| # 259648 | As we got further and further away, it [the Earth] diminished in size. | Kode Gaming Laptop | Crystal Bates | Credit Card | 5/10/2015 |
| # 486524 | Tantas earum numeris, scribi innumerabiles quietae clariora. | New Season Jacket | Nathan Watts | Paypal | 5/11/2015 |
| # 985632 | Metum quieti agatur ut sequitur delectatio accusamus. | IO Mouse | Ronnie Ellis | Credit Card | 5/16/2015 |
| # 159853 | Incorrupte torquatum animi nudus, pendet fugiamus pariter. | Doe Bike | Daniel Russell | Paypal | 5/22/2015 |
| # 753698 | Opes oculis forte omnisque virtute caecilii ceterorum. | Zets Baseball Bat | Sarah Graves | Credit Card | 5/28/2015 |
| # 154789 | Supplicii nominavi studiose sequimur vidisse. | Air Condition | Camila Lynch | Paypal | 6/10/2015 |
| # 321489 | Amentur pellat sinat commemorandis Vivatur. | DSLR | Ramon Dunn | Credit Card | 6/19/2015 |
| # 568741 | Applies the hover color to a particular row or cell. | Camping Bag | Scott Sanders | Paypal | 6/23/2015 |
| # 369852 | Indicates a dangerous or potentially negative action. | Jogging Shoes | Nina Wells | Credit Card | 6/25/2015 |