Basic Tables

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .tableto any <table>.

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

Striped rows

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

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

Bordered table

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

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

Hover rows

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

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

Responsive tables

Create responsive tables by wrapping any .tablein .table-responsiveto make them scroll horizontally on small devices(under 768px).

#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell

Condensed table

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

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
4MarkOtto@mdo
5JacobThornton@fat

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