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
Sleek Rubber Computer
Hintz, Treutel and O'Hara
Tuesday
Overdue
Avatar
Morton Breitenberg
Wuckert Inc
$ 79.00
Paid
invoice
Small Plastic Pants
MacGyver Inc
Monday
In 6 Days
Avatar
Lionel Harber
Rath, Volkman and Collins
$ 518.00
Paid
deposit
Practical Concrete Keyboard
Greenholt LLC
Friday
In 6 Days
Avatar
Lizzie Macejkovic
Wyman Group
$ 59.00
Paid
withdrawal
Handmade Frozen Shirt
Prosacco and Sons
Friday
In 6 Days
Avatar
Orin Hudson
Watsica - Jones
$ 969.00
Paid
withdrawal

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 Olaf Cruickshank Connor.Herzog70@hotmail.com Rey_Yundt Facilitator
2 Dock Emard Brant.Hirthe21@gmail.com Newell_Weimann Manager
3 Afton Bernhard Noe0@hotmail.com Gonzalo80 Developer
4 Johanna Graham Anabelle.Simonis@hotmail.com Emmie_Harvey70 Consultant

Hover Example

Add .table-hover to enable a hover state on table rows within a tbody

# Product Name Stats Last Month
1 Handcrafted Rubber Sausages 5,3,9,6,5,9,7,3,5,2 27.87%
2 Small Plastic Tuna 5,3,2,-1,-3,-2,2,3,5,2 54.09%
3 Handcrafted Cotton Chair 0,-3,-6,-4,-5,-4,-7,-3,-5,-2 0.17%
4 Gorgeous Rubber Bacon 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
Fundamental multi-tasking neural-net
60% Complete
July 15, Friday, 2015 October 28, Monday, 2016
Focused client-driven structure
60% Complete
September 15, Thursday, 2015 December 28, Saturday, 2016
Up-sized eco-centric forecast
60% Complete
March 15, Wednesday, 2015 April 28, Friday, 2016
Down-sized uniform capability
60% Complete
November 15, Saturday, 2015 August 28, Wednesday, 2016

Condensed Example

Add .table-condensed to make tables more compact by cutting cell padding in half.

# Name Price Date
Invoice #8052 Mallory Bogisich $ 430.00 November 15, Tuesday, 2015
Invoice #7233 Jake DuBuque $ 119.00 October 15, Wednesday, 2015
Invoice #7168 Garfield Kerluke $ 525.00 August 15, Friday, 2015
Invoice #1326 Monroe Kris $ 170.00 February 15, Monday, 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
#2477 Maida Cole $ 360.00 payment
#5401 Otha Larkin $ 260.00 invoice
#9663 Lula Jacobi $ 418.00 invoice
#9959 Hailee Ward $ 136.00 invoice

Contextual Example

Use contextual classes to color table rows or individual cells.

Invoice Name Date Price Status Country
#9686 Lucious Boehm June 15, Monday, 2015 $ 564.00 Money Market Account Netherlands
#9050 Emery Daniel June 15, Saturday, 2015 $ 944.00 Money Market Account Mali
#5743 Kris Spinka October 15, Saturday, 2015 $ 590.00 Credit Card Account Sao Tome and Principe
#0088 Ora McClure April 15, Sunday, 2015 $ 759.00 Personal Loan Account Ethiopia
#9875 Jarret Monahan June 15, Sunday, 2015 $ 499.00 Savings Account Cote d'Ivoire
#6243 Stuart Abshire August 15, Wednesday, 2015 $ 832.00 Personal Loan Account Guatemala
#0906 Craig McDermott November 15, Sunday, 2015 $ 93.00 Investment Account Palau
#0807 Roxanne Brakus November 15, Saturday, 2015 $ 282.00 Checking Account Puerto Rico
#7885 Emie Schmidt July 15, Friday, 2015 $ 3.00 Money Market Account Suriname

Navbar Options

Header Layout

Sidebar Options

Content View

Footer Options

Main Color

Navbar

Sidebar