container-header

Tables Basics

container-breadcrumb
  1. Home
  2. Tables
  3. Tables Basics
Settings
Fixed sidebar
Fixed footer
Fixed top navbar
Collapse sidebar
Boxed
Background
Default
Dark
Light
Themes
Default
White Light
Blue Navy
Blue Sky
Lime Lemon
Star Dust
Green Tea
Orange Round
Yellow Sun
Deep Purple
Yummy Chocolate
Dark Night
Soft Green
Wheel Red
Table Simple

CSS Classes: .table

# Name Surname Email
1 Otto Doggy otto.doggy@loremipsumiun.com
2 Adda Lady otto.lady@loremipsumiun.com
3 Thomas Petterson thomasy@loremipsumiun.com
4 Peter Thomasson peter@loremipsumiun.com
Table Stripped

CSS Classes: .table-striped

# Name Surname Difference
1 Otto Doggy 28%
2 Adda Lady -10%
3 Thomas Petterson 30%
4 Peter Thomasson 20%
Table Bordered

CSS Classes: .table-bordered

# Name Surname Email
1 Otto Doggy otto.doggy@loremipsumiun.com
2 Adda Lady otto.lady@loremipsumiun.com
3 Thomas Petterson thomasy@loremipsumiun.com
4 Peter Thomasson peter@loremipsumiun.com
Table Responsive

CSS Classes: .table-responsive

# Name Surname Email
1 Otto Doggy 20%
2 Adda Lady -20%
3 Thomas Petterson 18%
4 Peter Thomasson -6%
Table Hover Rows

CSS Classes: .table-hover

# Name Surname Email
1 Otto Doggy 20%
2 Adda Lady -20%
3 Thomas Petterson 18%
4 Peter Thomasson -6%
Table Theme Hover Rows

CSS Classes: .table-theme-hover

Change color theme and move the pointer over the rows.

# Name Surname Email
1 Otto Doggy 20%
2 Adda Lady -20%
3 Thomas Petterson 18%
4 Peter Thomasson -6%
Table Condensed

CSS Classes: .table-condensed

# Name Surname Email
1 Otto Doggy 20%
2 Adda Lady -20%
3 Thomas Petterson 18%
4 Peter Thomasson -6%
Table Contextual Classes

Contextual classes can be used to color table rows (

) or table cells (
):

CSS Classes: .table+ .info.warning.danger.success

# Name Surname Email
1 Otto Doggy +1%
2 Adda Lady 0%
3 Thomas Petterson -11%
4 Peter Thomasson 0%
5 Thomas Petterson -90%
6 Peter Thomasson 0%
7 Thomas Petterson 28%
8 Peter Thomasson 0%