Basic table
EntityVolumeValueStatus
Facebook23,53257340% Complete
Google781,13823% Complete (success)
Yahoo89548878% Complete
Themeforest76531,29056% Complete
Evanto89447849 Failed
Inverse table
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
Table head options

Use one of two modifier classes to make <thead> s appear light or dark gray.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
Bordered table

Add .table-bordered for borders on all sides of the table and cells.

#First NameLast NameUsername
1MarkOtto@mdo
2MarkOtto@TwBootstrap
3JacobThornton@fat
4Larry the Bird@twitter
Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody> .

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
Small table

Add .table-sm to make tables more compact by cutting cell padding in half.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
Contextual classes

Use contextual classes to color table rows or individual cells.

#Column headingColumn headingColumn heading
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content