Tables

Add to the table element the class table to get the default style table

Firstname Lastname Email
John Doe [email protected]
Kim Doe [email protected]
Dan Doe [email protected]

Striped Table

Add the classes table table-striped

Firstname Lastname Email
John Doe [email protected]
Kim Doe [email protected]
Dan Doe [email protected]
Striped Table Color-1

Add the classes table table-striped-color-1

Firstname Lastname Email
John Doe [email protected]
Kim Doe [email protected]
Dan Doe [email protected]

Hover Table

Add the classes table table-hover

Firstname Lastname Email
John Doe [email protected]
Kim Doe [email protected]
Dan Doe [email protected]
Hover Table Color-1

Add the classes table table-hover-color-1

Firstname Lastname Email
John Doe [email protected]
Kim Doe [email protected]
Dan Doe [email protected]

Bordered Table

Add the classes table table-bordered

Firstname Lastname Email
John Doe [email protected]
Kim Doe [email protected]
Dan Doe [email protected]
Bordered Table Color 1

Add the classes table table-bordered-color-1

Firstname Lastname Email
John Doe [email protected]
Kim Doe [email protected]
Dan Doe [email protected]

Striped Table no cell borders

Add the classes table table-striped table-cell-border-none

Firstname Lastname Email
John Doe [email protected]
Kim Doe [email protected]
Dan Doe [email protected]
Striped Table Color-1 no cell borders

Add the class table table-striped-color-1 table-cell-border-none

Firstname Lastname Email
John Doe [email protected]
Kim Doe [email protected]
Dan Doe [email protected]

Cell Separate Table

Striped Table Color-1 cell separate

Add the class table table-cell-separate

Firstname Lastname Email
John Doe [email protected]
Kim Doe [email protected]
Dan Doe [email protected]
Striped Table Color-1 cell separate border none

Add the class table table-cell-separate table-cell-border-none

Firstname Lastname Email
John Doe [email protected]
Kim Doe [email protected]
Dan Doe [email protected]
Striped Table Color-1 cell separate

Add the class table table-cell-separate

Firstname Lastname Email
John Doe [email protected]
Kim Doe [email protected]
Dan Doe [email protected]
Striped Table Color-1 cell separate border none

Add the class table table-cell-separate table-cell-border-none

Firstname Lastname Email
John Doe [email protected]
Kim Doe [email protected]
Dan Doe [email protected]

Dark Header

Striped Table Color-1 cell separate border none, dark head

Add the class table-dark-header to the table

Firstname Lastname Email
John Doe [email protected]
Kim Doe [email protected]
Dan Doe [email protected]
Striped Table Color-1 cell separate border none

Add the class table-color-1-header to the table

Firstname Lastname Email
John Doe [email protected]
Kim Doe [email protected]
Dan Doe [email protected]

Dark Footer

Footer Dark Table

Create a tfoot element and add the class table-dark-footer to the table

Month Leads Sales
January 100 50
February 200 100
Sum 300 150
Footer Color 1 Table

Create a tfoot element and add the class table-color-1-footer to the table

Month Leads Sales
January 100 50
February 200 100
Sum 300 150

Dark 1st Column

1st Column Dark Table

Add the class table-dark-1st-col to the table

Month January February March
Leads 200 100 100
Sales 100 50 50
1st Column Color 1 Table

Add the class table-color-1-1st-col to the table

Month January February March
Leads 200 100 100
Sales 100 50 50

Dark Last Column

Last Column Dark Table

Add the class table-dark-last-col to the table

Month January February Total
Leads 200 100 300
Sales 100 50 150
Last Column Color 1 Table

Add the class table-color-1-last-col to the table

Month January February Total
Leads 200 100 300
Sales 100 50 150

Table Height

Add the class table-compact to the table

Table compact
Firstname Lastname Email City Country Age
John Doe [email protected] Montreal Canada 30
Kim Doe [email protected] Kharkov Ukraine 25
Table Large

Add the class table-large to the table

Firstname Lastname Email City Country Age
John Doe [email protected] Montreal Canada 30
Kim Doe [email protected] Kharkov Ukraine 25

Responsive Table

Add the class auto-overflow-x to a div and put the table inside it

Firstname Lastname Email City Country Age
John Doe [email protected] Montreal Canada 30
Kim Doe [email protected] Kharkov Ukraine 25

Fixed Layout Table

Add the class table-layout-fixed and one of these clases table-td-w-5rem table-td-w-10rem table-td-w-15rem

Firstname Lastname Email City Country Age
John Doe [email protected] Montreal Canada 30
Kim Doe [email protected] Kharkov Ukraine 25
← Previous Next →

Built with love in Ukraine 🇺🇦 by Kim Majali, EITO team, and contributors.