Skip to content

Tables

Table Styles


Basic Table

The .table class adds basic styling (light padding and horizontal dividers) to a table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

 

Bordered Table

The .table-bordered class adds borders on all sides of the table and the cells:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

 

Striped Rows

The .table-striped class adds zebra-stripes to a table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

 

Borderless Table

The .table-borderless class removes borders from the table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

 

Table Head Colors

The .thead-dark class adds a black background to table headers, and the .thead-light class adds a grey background to table headers:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

 

Small Table

The .table-sm class makes the table smaller by cutting cell padding in half:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

 

Responsive Table

The .table-responsive class creates a responsive table which will scroll horizontally on screens that are less than 992px wide (if needed). When viewing on anything larger than 992px, there is no difference:

# Firstname Lastname Age City Country Sex Example Example Example Example Example Example Example Example Example Example Example Example
1 Anna Pitt 35 New York USA Female Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes