basic table
  1. Dashboard
  2. table
  3. basic table
Basic Table

Add class table in table tag.

# First Name Last Name Username Role
1 Jens Brincker Brincker123 admin
2 Mark Hay Hay123 member
3 Anthony Davie Davie123 developer
4 David Perry Perry123 supporter
5 Anthony Davie Davie123 member
6 Alan Gilchrist Gilchrist123 supporter
Table Hover

Add class table-hover in table tag.

# Products Popularity Sales
1 Milk Powder 0,-3,-2,-4,5,-4,3,-2,5,-1 28.76%
2 Air Conditioner 0,-1,1,-2,-3,1,-2,-3,1,-2 8.55%
3 RC Cars 0,3,6,1,2,4,6,3,2,1 58.56%
4 Down Coat 0,3,6,4,5,4,7,3,4,2 35.76%
Bordered Table

Add class table-bordered in table tag for 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 Table

Add class table-striped in table tag.

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
Responsive Table

Create responsive tables by wrapping any table in table-responsive class.

Invoice User Date Amount Status Country
Order #26589 Herman Beck Oct 16, 2016 $45.00
Paid
EN
Order #58746 Mary Adams Oct 12, 2016 $245.30
Shipped
CN
Order #98458 Caleb Richards May 18, 2016 $38.00
Shipped
AU
Order #32658 June Lane Apr 28, 2016 $77.99
Paid
FR
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
Table style 1

Create style tables by wrapping any table with class table table-striped in color-bg-table class.

# First Name Last Name Username Role
1 Jens Brincker Brincker123 admin
2 Mark Hay Hay123 member
3 Anthony Davie Davie123 developer
4 David Perry Perry123 supporter
5 Anthony Davie Davie123 member
6 Alan Gilchrist Gilchrist123 supporter
Table style 2

Create style tables by wrapping any table with class table table-striped table-bordered in color-bg-table class.

# First Name Last Name Username Role
1 Jens Brincker Brincker123 admin
2 Mark Hay Hay123 member
3 Anthony Davie Davie123 developer
4 David Perry Perry123 supporter
5 Anthony Davie Davie123 member
6 Alan Gilchrist Gilchrist123 supporter

2018 © Snoopy. Pampered by Hencework