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.
Basic Example
For styling—light padding and only horizontal dividers—add the base class .table to any table.
| Project | Deadline | Leader + Team | Budget | Status | Actions |
|---|---|---|---|---|---|
| Awesome Soft Towels
Schowalter and Sons |
Monday
Overdue |
Milo Wintheiser
Shields, Daugherty and Hackett |
$ 757.00
Paid |
invoice |
|
| Rustic Soft Computer
Fisher - Jacobi |
Tuesday
In 6 Days |
Dallas Stark
Orn, O'Keefe and White |
$ 933.00
Paid |
invoice |
|
| Generic Granite Shoes
Grant LLC |
Sunday
In 6 Days |
Mariane Thiel
Windler - Kemmer |
$ 43.00
Paid |
payment |
|
| Practical Cotton Computer
Sawayn, Reichert and Dicki |
Sunday
In 6 Days |
Leanna Kozey
Bergstrom, Brown and Jast |
$ 159.00
Paid |
invoice |
|
Striped Example
Use .table-striped to add zebra-striping to any table row within the tbody
| # | First Name | Last Name | Nick | Role | |
|---|---|---|---|---|---|
| 1 | Kiana | Homenick | Gwendolyn98@hotmail.com | Shanelle_Hagenes | Strategist |
| 2 | Gayle | Stark | Eleazar42@gmail.com | Kayli45 | Orchestrator |
| 3 | Frida | Stroman | Jane_Abernathy@gmail.com | Omari3 | Agent |
| 4 | Treva | Dickinson | Matilda.Becker83@gmail.com | Silas16 | Producer |
Hover Example
Add .table-hover to enable a hover state on table rows within a tbody
| # | Product Name | Stats | Last Month |
|---|---|---|---|
| 1 | Licensed Fresh Gloves | 5,3,9,6,5,9,7,3,5,2 | 27.87% |
| 2 | Sleek Cotton Mouse | 5,3,2,-1,-3,-2,2,3,5,2 | 54.09% |
| 3 | Generic Steel Pizza | 0,-3,-6,-4,-5,-4,-7,-3,-5,-2 | 0.17% |
| 4 | Handcrafted Metal Fish | 5,3,2,-1,-3,-2,2,3,5,2 | 100.98% |
Borderd Example
Add .table-bordered for borders on all sides of the table and cells.
| Ticket | Completion | Create | Deadline | Actions |
|---|---|---|---|---|
| Front-line radical leverage |
|
November 15, Saturday, 2015 | August 28, Thursday, 2016 |
|
| Multi-layered tangible capability |
|
March 15, Wednesday, 2015 | March 28, Thursday, 2016 |
|
| Total incremental projection |
|
May 15, Tuesday, 2015 | April 28, Wednesday, 2016 |
|
| Self-enabling modular collaboration |
|
August 15, Tuesday, 2015 | July 28, Sunday, 2016 |
|
Condensed Example
Add .table-condensed to make tables more compact by cutting cell padding in half.
| # | Name | Price | Date |
|---|---|---|---|
| Invoice #6785 | Neva Strosin | $ 984.00 | August 15, Sunday, 2015 |
| Invoice #2546 | Marquise Boyer | $ 782.00 | October 15, Tuesday, 2015 |
| Invoice #1656 | Georgianna Rosenbaum | $ 886.00 | February 15, Friday, 2015 |
| Invoice #9381 | Mona Wuckert | $ 328.00 | April 15, Sunday, 2015 |
Responsive Example
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px).
| ID | Name | Amount | Payment |
|---|---|---|---|
| #9541 | Verdie Ortiz | $ 884.00 | deposit |
| #7998 | Bella McLaughlin | $ 719.00 | withdrawal |
| #3217 | Tina Beahan | $ 443.00 | invoice |
| #3390 | Isabelle Lubowitz | $ 605.00 | deposit |
Contextual Example
Use contextual classes to color table rows or individual cells.
| Invoice | Name | Date | Price | Status | Country |
|---|---|---|---|---|---|
| #6607 | Jerod Barton | January 15, Tuesday, 2015 | $ 499.00 | Investment Account | Mali |
| #8292 | Keagan Stamm | June 15, Monday, 2015 | $ 351.00 | Personal Loan Account | Madagascar |
| #6840 | Bailee McDermott | August 15, Tuesday, 2015 | $ 498.00 | Money Market Account | Fiji |
| #2357 | Selmer Beatty | July 15, Wednesday, 2015 | $ 275.00 | Savings Account | Afghanistan |
| #4424 | Earnestine Wisoky | March 15, Monday, 2015 | $ 675.00 | Investment Account | South Georgia and the South Sandwich Islands |
| #5088 | Conor Kreiger | October 15, Saturday, 2015 | $ 90.00 | Auto Loan Account | French Southern Territories |
| #2403 | Keanu Schneider | December 15, Monday, 2015 | $ 754.00 | Credit Card Account | Switzerland |
| #5399 | Kendra Hodkiewicz | January 15, Thursday, 2015 | $ 554.00 | Home Loan Account | Italy |
| #3377 | Freeda Pacocha | November 15, Sunday, 2015 | $ 519.00 | Savings Account | Kyrgyz Republic |
