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 .table to 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.
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Variants
Use contextual classes to color tables, table rows or individual cells.
Use .table-striped to add zebra-striping to any table row within the <tbody>. .table-striped also works in table variants
<tableclass="table table-striped"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table><h4class="mt-4 mb-3">Table Dark</h4><tableclass="table table-striped table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table><h4class="mt-4 mb-3">Table Success</h4><tableclass="table table-striped table-success"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Table Dark
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Table Success
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Hoverable rows
Add .table-hover to enable a hover state on table rows within a <tbody>. These hoverable rows can also be worked with .table-dark and combined with the strped variant.
<tableclass="table table-hover"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table><h4class="mt-4 mb-3">Table Dark</h4><tableclass="table table-hover table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table><h4class="mt-4 mb-3">Table striped</h4><tableclass="table table-hover table-striped"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Table Dark
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Table striped
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Active tables
Highlight a table row or cell by adding a .table-active class.
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><trclass="table-active"></tr><tr></tr><tr><thscope="row">3</th><tdclass="table-active"colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
#
First
Last
Handle
3
Larry the Bird
@twitter
Table Borders
Bordered tables
Add .table-bordered for borders on all sides of the table and cells. Border color utilities can be added to change colors.
<tableclass="table table-bordered"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table><h4class="mt-4 mb-3">Border utility class</h4><tableclass="table table-bordered border-primary"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Border utility class
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Table without borders
Add .table-bordered for borders on all sides of the table and cells.
<tableclass="table table-bordered"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table><h4class="mt-4 mb-3">Table Dark</h4><tableclass="table table table-dark table-borderless"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Table Dark
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Small Tables
Add .table-bordered for borders on all sides of the table and cells.
<tableclass="table table-sm"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry 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 .table with .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}.
Always responsive
Across every breakpoint, use .table-responsive for horizontally scrolling tables.
<divclass="table-responsive"><tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div>
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Breakpoint specific
Use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
<divclass="table-responsive table-reponsive-sm"><tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div>