Griffin I Basic Table

Regular Table

Add class .tablein table tag.

#	First Name	Last Name	Username	Role
1	Jens	Brincker	Brincker123	admin
2	Mark	Hay	Hay123	member
3	Anthony	Davie	Davie123	developer
4	David	Perry	Perry123	supporter
5	Anthony	Davie	Davie123	member
6	Alan	Gilchrist	Gilchrist123	supporter

Table head options

Similar to tables and dark tables, use the modifier classes .thead-lightor .thead-darkto make <thead>s appear light or dark gray.

#	thead-primary	Last Name	Username	Role

#	thead-secondary	Last Name	Username	Role

#	thead-success	Last Name	Username	Role

#	thead-warning	Last Name	Username	Role

#	thead-info	Last Name	Username	Role

#	thead-danger	Last Name	Username	Role

#	thead-dark	Last Name	Username	Role

#	thead-light	Last Name	Username	Role

Table Hover

Add class .table-hoverin table tag.

#	Products	Popularity	Sales
1	Milk Powder	1,6,6,9,7,4,8,5,2,1	28.76%
2	Air Conditioner	7,5,2,4,5,7,9,3,1,2	8.55%
3	RC Cars	0,3,6,1,2,4,6,3,2,1	58.56%
4	Down Coat	9,8,5,4,9,4,3,2,1,8	35.76%

Bordered Table

Add class .table-borderedin table tag for borders on all sides of the table and cells.

Task	Progress	Deadline	Action
Lunar probe project		May 15, 2015
Dream successful plan		July 1, 2015
Office automatization		Apr 12, 2015
The sun climbing plan		Aug 9, 2015
Open strategy		Apr 2, 2015
Tantas earum numeris		July 11, 2015

Striped Table

Add class .table-stripedin table tag.

Task	Progress	Deadline	Action
Lunar probe project		May 15, 2015
Dream successful plan		July 1, 2015
Office automatization		Apr 12, 2015
The sun climbing plan		Aug 9, 2015
Open strategy		Apr 2, 2015
Tantas earum numeris		July 11, 2015

Large table

Add class .table-lgto make tables more compact by cutting cell padding in half.

Task	Deadline	Action
Lunar probe project	May 15, 2015
Dream successful plan	July 1, 2015
Office automatization	Apr 12, 2015

Small table

Add class .table-smto make tables more compact by cutting cell padding in half.

Task	Deadline	Action
Lunar probe project	May 15, 2015
Dream successful plan	July 1, 2015
Office automatization	Apr 12, 2015

Responsive Table

Create responsive tables by wrapping any table in .table-responsiveclass.

Invoice	User	Date	Amount	Status	Country
Order #26589	Herman Beck	Oct 16, 2016	$45.00	Paid	EN
Order #58746	Mary Adams	Oct 12, 2016	$245.30	Pending	CN
Order #98458	Caleb Richards	May 18, 2016	$38.00	Shipped	AU
Order #32658	June Lane	Apr 28, 2016	$77.99	Paid	FR

Breakpoint specific

Use table-responsive{-sm|-md|-lg|-xl}as needed to create responsive tables up to a particular breakpoint.

Invoice	User	Date	Amount	Status	Country
Order #26589	Herman Beck	Oct 16, 2016	$45.00	Paid	EN
Order #58746	Mary Adams	Oct 12, 2016	$245.30	Pending	CN
Order #98458	Caleb Richards	May 18, 2016	$38.00	Shipped	AU
Order #32658	June Lane	Apr 28, 2016	$77.99	Paid	FR

Table flush

Add class .table-flushin table tag.

Task	Progress	Deadline	Action
Lunar probe project		May 15, 2015
Dream successful plan		July 1, 2015
Office automatization		Apr 12, 2015
The sun climbing plan		Aug 9, 2015
Open strategy		Apr 2, 2015
Tantas earum numeris		July 11, 2015

Contextual Classes

Use classes ( .active, .success, .info, .warning, .danger )to color table rows or individual cells.

#	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

Dark table

Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.

#	Column heading	Column heading	Column heading
1	Column content	Column content	Column content
2	Column content	Column content	Column content
3	Column content	Column content	Column content

Table Color Variations