Tables
Basic example
Using the most basic table markup, here’s how
.table
-based tables look in Bootstrap.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Katherine | Joel | @Commodo |
| 2 | Meyer | Warner | @a |
| 3 | Hannah | Fitzgerald | @cillum |
Accented tables
Striped rows
Use
.table-striped
to add zebra-striping to any table row within the
<tbody>
.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Katherine | Joel | @Commodo |
| 2 | Meyer | Warner | @a |
| 3 | Hannah | Fitzgerald | @cillum |
Striped columns
Use
.table-striped-columns
to add zebra-striping to any table column.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Katherine | Joel | @Commodo |
| 2 | Meyer | Warner | @a |
| 3 | Hannah | Fitzgerald | @cillum |
Hoverable rows
Add
.table-hover
to enable a hover state on table rows within a
<tbody>
.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Katherine | Joel | @Commodo |
| 2 | Meyer | Warner | @a |
| 3 | Hannah | Fitzgerald | @cillum |
Active tables
Highlight a table row or cell by adding a
.table-active
class.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Katherine | Joel | @Commodo |
| 2 | Meyer | Warner | @a |
| 3 | Hannah | Fitzgerald | @cillum |
Table borders
Bordered tables
Add
.table-bordered
for borders on all sides of the table and cells.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Katherine | Joel | @Commodo |
| 2 | Meyer | Warner | @a |
| 3 | Hannah | Fitzgerald | @cillum |
Borderless Table
Add
.table-borderless
for a table without borders.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Katherine | Joel | @Commodo |
| 2 | Meyer | Warner | @a |
| 3 | Hannah | Fitzgerald | @cillum |
Small tables
Add
.table-sm
to make any
.table
more compact by cutting all cell
padding
in half.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Katherine | Joel | @Commodo |
| 2 | Meyer | Warner | @a |
| 3 | Hannah | Fitzgerald | @cillum |
Responsive tables
Always responsive
Across every breakpoint, use
.table-responsive
for horizontally scrolling tables.
| # | 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 |
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.
<div class="table-responsive-{breakpoint}">
<table class="table">
...
</table>
</div>