Using the most basic table markup, here’s how .table
-based tables look in Bootstrap.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Use .table-striped
to add zebra-striping to any table row within the <tbody>
s appear light or dark gray.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-striped">
...
</table>
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
Footer | Footer | Footer | Footer |
<table class="table">
<thead>
...
</thead>
<tbody>
...
</tbody>
<tfoot>
...
</tfoot>
</table>
A <caption>
functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table class="table table-sm">
<caption>List of users</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Add .table-bordered
for borders on all sides of the table and cells.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table class="table table-bordered">
...
</table>
Add .table-borderless
for a table without borders.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table class="table table-borderless">
...
</table>
Use the modifier classes .thead-light
or .thead-dark
to make <thead>
s appear light or dark gray.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table">
<thead class="table-dark">
...
</thead>
<tbody>
...
</tbody>
</table>
Similar to tables and dark tables, use the modifier classes .table-light
or .table-dark
to make <thead>
s appear light or dark gray.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table class="table table-hover">
...
</table>
Border styles, active styles, and table variants are not inherited by nested tables.
# | First | Last | Handle | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Mark | Otto | @mdo | ||||||||||||
|
|||||||||||||||
3 | Larry | the Bird |
<table class="table table-striped">
<thead>
...
</thead>
<tbody>
...
<tr>
<td colspan="4">
<table class="table mb-0">
...
</table>
</td>
</tr>
...
</tbody>
</table>
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table
with .table-responsive
.
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
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.
These tables may appear broken until their responsive styles apply at specific viewport widths.
# | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>
# | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive-md">
<table class="table">
...
</table>
</div>