Tables

A demo list of all the types of tables included in QuillPro - Whether it's Basic, Fully Responsive or Datatables.

1. Basic Table

Basic table layout with only .table class.

# First Name Last Name Progress
1 Jonas Quinn
2 Mark Otto
3 Jacob Thornton
4 Larry the Bird

2. Striped Table

Add .table-striped class to the table to get the striped effect.

# First Name Last Name Progress
1 Jonas Quinn
2 Mark Otto
3 Jacob Thornton
4 Larry the Bird

3. Bordered Table

Add .table-bordered class to the table to get the bordered effect.

# First Name Last Name Progress
1 Jonas Quinn
2 Mark Otto
3 Jacob Thornton
4 Larry the Bird

4. Hover Rows

Add .table-hover class to the table to get the hover effect.

# First Name Last Name Progress
1 Jonas Quinn
2 Mark Otto
3 Jacob Thornton
4 Larry the Bird

5. Dark Colors (Inverted)

Add .table-dark class to the table to get the inverse background color look.

# First Name Last Name Progress
1 Jonas Quinn
2 Mark Otto
3 Jacob Thornton
4 Larry the Bird

6. Small Table

Add .table-sm class to make you table look small.

# First Name Last Name Progress
1 Jonas Quinn
2 Mark Otto
3 Jacob Thornton
4 Larry the Bird

7. Stripped (Dark)

Add .thead-striped and .thead-dark class to .table.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

8. Bordered (Dark)

Add .thead-bordered and .thead-dark class to <table>.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

9. Hover

Add .table-hover to <table>.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

10. Hover (Dark)

Add .table-hover and .table-dark to <table>.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

11. Header Options

Add .thead-dark class to the thead tag to make the header inverse.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Add .thead-light class to the thead tag to get the default background on the thead tag.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

12. Contextual Classes

Add .table-* class to the row (tr) tag of your choice to get the look you wish. Eg: .table-active for Active background, or .table-success for Success colored background, etc

Type Column heading Column heading Column heading
Active Column content Column content Column content
Default Column content Column content Column content
Primary Column content Column content Column content
Secondary Column content Column content Column content
Success Column content Column content Column content
Danger Column content Column content Column content
Warning Column content Column content Column content
Info Column content Column content Column content
Light Column content Column content Column content
Dark Column content Column content Column content

13. Captions

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

14. Responsive Table

Add .table-responsive the container holding the .table to make them scroll horizontally on small devices. Resize your window to see it in action.

You can take responsiveness to a new level by using breakpoint specific classes. Use .table-responsive{-sm|-md|-lg|-xl}, instead of just .table-responsive, as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

15. Datatables

Add .table-datatable class to the table tag to create a datatable. You can also add the .table-responsive class to the container holding the table to make it responsive

Film Title Released Studio Worldwide Gross Domestic Gross Foreign Gross Budget
Frozen 2013 Disney $1,232,617,000 $400,617,000 $832,000,000 $150,000,000
Toy Story 3 2010 Disney Pixar $1,063,171,911 $415,004,880 $648,167,031 $200,000,000
The Lion King 1994 Disney $987,483,777 $422,783,777 $564,700,000 $45,000,000
Despicable Me 2 2013 Universal $970,761,885 $368,061,265 $602,700,620 $76,000,000
Finding Nemo 2003 Pixar $936,743,261 $380,843,261 $555,900,000 $94,000,000
Shrek 2 2004 Dreamworks $919,838,758 $441,226,247 $478,612,511 $150,000,000
Ice Age: Dawn of the Dinosaurs 2009 Fox $886,686,817 $196,573,705 $690,113,112 $90,000,000
Ice Age: Continental Drift 2012 Fox $877,244,782 $161,321,843 $715,922,939 $95,000,000
Shrek the Third 2007 Dreamworks $798,958,162 $322,719,944 $476,238,218 $160,000,000
Shrek Forever After 2010 Dreamworks $752,600,867 $238,736,787 $513,864,080 $165,000,000
Frozen 2013 Disney $1,232,617,000 $400,617,000 $832,000,000 $150,000,000
Toy Story 3 2010 Disney Pixar $1,063,171,911 $415,004,880 $648,167,031 $200,000,000
The Lion King 1994 Disney $987,483,777 $422,783,777 $564,700,000 $45,000,000
Despicable Me 2 2013 Universal $970,761,885 $368,061,265 $602,700,620 $76,000,000
Finding Nemo 2003 Pixar $936,743,261 $380,843,261 $555,900,000 $94,000,000
Shrek 2 2004 Dreamworks $919,838,758 $441,226,247 $478,612,511 $150,000,000
Ice Age: Dawn of the Dinosaurs 2009 Fox $886,686,817 $196,573,705 $690,113,112 $90,000,000
Ice Age: Continental Drift 2012 Fox $877,244,782 $161,321,843 $715,922,939 $95,000,000
Shrek the Third 2007 Dreamworks $798,958,162 $322,719,944 $476,238,218 $160,000,000
Shrek Forever After 2010 Dreamworks $752,600,867 $238,736,787 $513,864,080 $165,000,000