:: Vsparks :: Table Color

Table Color

Default styling

Example of a table with bootstrap default styling. By default any table with .table class has transparent background color.

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

Contingent classes

Example of Contingent classes for table rows. Contingent classes are used to color table rows or individual cells. It use Bootstrap by default colors.

Firstname	Lastname	Email	Password	Status
John	Doe	john@example.com	***********	Approved
Mary	Moe	mary@example.com	*********	Declined
July	Dooley	july@example.com	******	Pending
Piter	pan	july@example.com	*********	Information

Custom row colors

Example of custom colors for table rows. Add custom background colors available in bootstrap brand colors. To use bootstrap brand color in the table footer, add .bg-* class to the footer row. All border and text colors will be automatically adjusted.

Firstname	Lastname	Email	Password	Status
Alexandra	Blake	john@example.com	***********	Approved
Alonso	Lanier	john@example.com	***********	-
Mary	Moe	mary@example.com	*********	Declined
Carol	Sankey	john@example.com	***********	-
July	Dooley	july@example.com	******	Pending
Andrea	Baker	john@example.com	***********	-
Piter	pan	july@example.com	*********	Information
John	Doe	john@example.com	***********	-
Claire	Burgess	july@example.com	***********	Active

Firstname	Lastname	Email	Password	Status
Alexandra	Blake	john@example.com	***********	Approved
Alonso	Lanier	john@example.com	***********	-
Mary	Moe	mary@example.com	*********	Declined
Carol	Sankey	john@example.com	***********	-
July	Dooley	july@example.com	******	Pending
Andrea	Baker	john@example.com	***********	-
Piter	pan	july@example.com	*********	Information
John	Doe	john@example.com	***********	-
Claire	Burgess	july@example.com	***********	Active

Custom table formatting

Example of a table with custom formatting color. Add custom background colors available in bootstrap brand colors. To use bootstrap brand color in the table footer, add .bg-* class to the footer row. All border and text colors will be automatically adjusted.

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

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

Table formatting options

Table with custom formatting color supports all default table layouts and options. In this example our table displays all possible borders, striped rows and changes background color on row hover.