Example

Due to the widespread use of <table>elements across third-party widgets like calendars and date pickers,Bootstrap’s tables are opt-in. Add the base class .tableto any <table>,then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap,meaning any nested tables can be styled independent from the parent.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
Variants

Use contextual classes to color tables,table rows or individual cells.

ClassHeadingHeading
DefaultCellCell
PrimaryCellCell
SecondaryCellCell
SuccessCellCell
DangerCellCell
WarningCellCell
InfoCellCell
DarkCellCell
Striped rows

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

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
Hoverable rows

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

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
Bordered tables

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

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
Tables without borders

Add .table-borderlessfor a table without borders.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
Small tables

Add .table-smto make any .tablemore compact by cutting all cell paddingin half.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .tablewith .table-responsive. Or,pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl|-xxl}.

#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCellCell