Basic Table Tables

Basic Table

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

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

Striped Rows

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

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

Bordered Table

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

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

Hover Rows

The .table-hover class enables a hover state (grey background on mouse over) on table rows:

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

Black/Dark Table

The .table-dark class adds a black background to the table:

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

Dark Striped Table

Combine .table-dark and .table-striped to create a dark, striped table:

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

Hoverable Dark Table

The .table-hover class adds a hover effect (grey background color) on table rows:

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

Borderless Table

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

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

Contextual Classes

Contextual classes can be used to color the table, table rows or table cells. The classes that can be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:

Firstname	Lastname	Email
Default	Defaultson	[email protected]
Primary	Joe	[email protected]
Success	Doe	[email protected]
Danger	Moe	[email protected]
Info	Dooley	[email protected]
Warning	Refs	[email protected]
Active	Activeson	[email protected]
Secondary	Secondson	[email protected]
Light	Angie	[email protected]
Dark	Bo	[email protected]

Small Table

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

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]
Active	Activeson	[email protected]
Info	Dooley	[email protected]

Small Table With Background

The classes used are: .swatch-blue, .swatch-indigo, .swatch-red, .swatch-pink, .swatch-cyan

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]
Active	Activeson	[email protected]
Active	Activeson	[email protected]

Support Team 5 mins

Perfectus Design Team 2 hours

Developers Today

Sales Department Yesterday

Reviewers 2 days

Design some buttons 20%

Create a nice theme 40%

Some task I need to do 60%

Make beautiful transitions 80%