Loading. Please Wait.

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
Avatar
Milo Wintheiser
Shields, Daugherty and Hackett
$ 757.00
Paid
invoice
Rustic Soft Computer
Fisher - Jacobi
Tuesday
In 6 Days
Avatar
Dallas Stark
Orn, O'Keefe and White
$ 933.00
Paid
invoice
Generic Granite Shoes
Grant LLC
Sunday
In 6 Days
Avatar
Mariane Thiel
Windler - Kemmer
$ 43.00
Paid
payment
Practical Cotton Computer
Sawayn, Reichert and Dicki
Sunday
In 6 Days
Avatar
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 E-mail 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
60% Complete
November 15, Saturday, 2015 August 28, Thursday, 2016
Multi-layered tangible capability
60% Complete
March 15, Wednesday, 2015 March 28, Thursday, 2016
Total incremental projection
60% Complete
May 15, Tuesday, 2015 April 28, Wednesday, 2016
Self-enabling modular collaboration
60% Complete
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

Navbar Options

Header Layout

Sidebar Options

Content View

Footer Options

Main Color

Navbar

Sidebar