Tables
Bootstrap 5 Tables
Tables allow you to aggregate a huge amount of data and present it in a clear and orderly way. MDB tables provide additional benefits like responsiveness and the possibility of manipulating the table styles.
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 independently from the parent.
Note: If you need more advanced examples and options, see the links below.
Basic example
Using the most basic table markup, here’s how .table-based tables look in MDB.
| # | 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>
Advanced example
An advanced example of the table with images, badges, buttons, and secondary texts.
| Name | Title | Status | Position | Actions |
|---|---|---|---|---|
John Doe john.doe@gmail.com |
Software engineer IT department |
Active | Senior | |
Alex Ray alex.ray@gmail.com |
Consultant Finance |
Onboarding | Junior | |
Kate Hunington kate.hunington@gmail.com |
Designer UI/UX |
Awaiting | Senior |
<table class="table align-middle mb-0 bg-white">
<thead class="bg-light">
<tr>
<th>Name</th>
<th>Title</th>
<th>Status</th>
<th>Position</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center">
<img
src="https://mdbootstrap.com/img/new/avatars/8.jpg"
alt=""
style="width: 45px; height: 45px"
class="rounded-circle"
/>
<div class="ms-3">
<p class="fw-bold mb-1">John Doe</p>
<p class="text-muted mb-0">john.doe@gmail.com</p>
</div>
</div>
</td>
<td>
<p class="fw-normal mb-1">Software engineer</p>
<p class="text-muted mb-0">IT department</p>
</td>
<td>
<span class="badge badge-success rounded-pill d-inline">Active</span>
</td>
<td>Senior</td>
<td>
<button type="button" class="btn btn-link btn-sm btn-rounded">
Edit
</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<img
src="https://mdbootstrap.com/img/new/avatars/6.jpg"
class="rounded-circle"
alt=""
style="width: 45px; height: 45px"
/>
<div class="ms-3">
<p class="fw-bold mb-1">Alex Ray</p>
<p class="text-muted mb-0">alex.ray@gmail.com</p>
</div>
</div>
</td>
<td>
<p class="fw-normal mb-1">Consultant</p>
<p class="text-muted mb-0">Finance</p>
</td>
<td>
<span class="badge badge-primary rounded-pill d-inline"
>Onboarding</span
>
</td>
<td>Junior</td>
<td>
<button
type="button"
class="btn btn-link btn-rounded btn-sm fw-bold"
data-mdb-ripple-color="dark"
>
Edit
</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<img
src="https://mdbootstrap.com/img/new/avatars/7.jpg"
class="rounded-circle"
alt=""
style="width: 45px; height: 45px"
/>
<div class="ms-3">
<p class="fw-bold mb-1">Kate Hunington</p>
<p class="text-muted mb-0">kate.hunington@gmail.com</p>
</div>
</div>
</td>
<td>
<p class="fw-normal mb-1">Designer</p>
<p class="text-muted mb-0">UI/UX</p>
</td>
<td>
<span class="badge badge-warning rounded-pill d-inline">Awaiting</span>
</td>
<td>Senior</td>
<td>
<button
type="button"
class="btn btn-link btn-rounded btn-sm fw-bold"
data-mdb-ripple-color="dark"
>
Edit
</button>
</td>
</tr>
</tbody>
</table>
Variants
Use contextual classes to color tables, table rows or individual cells.
| Class | Heading | Heading |
|---|---|---|
| Default | Cell | Cell |
| Primary | Cell | Cell |
| Secondary | Cell | Cell |
| Success | Cell | Cell |
| Danger | Cell | Cell |
| Warning | Cell | Cell |
| Info | Cell | Cell |
| Light | Cell | Cell |
| Dark | Cell | Cell |
<table class="table">
<thead>
<tr>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Default</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-secondary">
<th scope="row">Secondary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-success">
<th scope="row">Success</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-danger">
<th scope="row">Danger</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-warning">
<th scope="row">Warning</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-info">
<th scope="row">Info</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-light">
<th scope="row">Light</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-dark">
<th scope="row">Dark</th>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
Conveying meaning to assistive technologies:
Using color to add meaning only provides a visual indication, which will not be conveyed to
users of assistive technologies – such as screen readers. Ensure that information denoted by
the color is either obvious from the content itself (e.g. the visible text), or is included
through alternative means, such as additional text hidden with the
.visually-hidden class.
Striped
Use .table-striped to add zebra-striping to any table row within the
<tbody>.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-striped"></table>
Hoverable
Add .table-hover to enable a hover state on table rows within a
<tbody>.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-hover"></table>
These hoverable rows can also be combined with the striped variant:
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-striped table-hover"></table>
Active tables
Highlight a table row or cell by adding a .table-active class.
| # | 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 class="table-active">
<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" class="table-active">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Bordered
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>
Border color utilities can be added to change colors:
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-bordered border-primary"></table>
Borderless
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>
Small
Add .table-sm to make any .table more compact by cutting all cell
padding in half.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-sm"></table>
Vertical alignment
Table cells of <thead> are always vertical aligned to the bottom. Table
cells in <tbody> inherit their alignment from
<table> and are aligned to the the top by default. Use the
vertical align classes to re-align
where needed.
| Heading 1 | Heading 2 | Heading 3 | Heading 4 |
|---|---|---|---|
This cell inherits vertical-align: middle; from the table |
This cell inherits vertical-align: middle; from the table |
This cell inherits vertical-align: middle; from the table |
Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. |
This cell inherits vertical-align: bottom; from the table row |
This cell inherits vertical-align: bottom; from the table row |
This cell inherits vertical-align: bottom; from the table row |
Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. |
This cell inherits vertical-align: middle; from the table |
This cell inherits vertical-align: middle; from the table |
This cell is aligned to the top. | Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. |
<table class="table align-middle">
<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 class="align-bottom">
<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 class="align-top">@twitter</td>
</tr>
</tbody>
</table>
Nesting
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>
How nesting works
To prevent any styles from leaking to nested tables, we use the child combinator
(>) selector in our CSS. Since we need to target all the tds and
ths in the thead, tbody, and tfoot, our
selector would look pretty long without it. As such, we use the rather odd looking
.table > :not(caption) > * > * selector to target all tds
and ths of the .table, but none of any potential nested tables.
Note that if you add <tr>s as direct children of a table, those
<tr> will be wrapped in a <tbody> by default, thus
making our selectors work as intended.
Additional examples
A few practical examples of the use of tables with typical components such as buttons, checkboxes or icons.
Checkboxes
To learn more about checkboxes read Checkbox Docs.
|
|
Lorem | Ipsum | Dolor |
|---|---|---|---|
|
|
Sit | Amet | Consectetur |
|
|
Adipisicing | Elit | Sint |
|
|
Hic | Fugiat | Temporibus |
<table class="table">
<thead>
<tr>
<th scope="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
</div>
</th>
<th scope="col">Lorem</th>
<th scope="col">Ipsum</th>
<th scope="col">Dolor</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
</div>
</th>
<td>Sit</td>
<td>Amet</td>
<td>Consectetur</td>
</tr>
<tr>
<th scope="row">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
</div>
</th>
<td>Adipisicing</td>
<td>Elit</td>
<td>Sint</td>
</tr>
<tr>
<th scope="row">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"/>
</div>
</th>
<td>Hic</td>
<td>Fugiat</td>
<td>Temporibus</td>
</tr>
</tbody>
</table>
Icons
To learn more about icons read Icons Docs.
| Product Detail Views | Unique Purchases | Quantity | Product Revenue | Avg. Price | |
|---|---|---|---|---|---|
| Value | 18,492 | 228 | 350 | $4,787.64 | $13.68 |
| Percentage change | -48.8%% | 14.0% | 46.4% | 29.6% | -11.5% |
| Absolute change | -17,654 | 28 | 111 | $1,092.72 | $-1.78 |
<table class="table table-hover text-nowrap">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Product Detail Views</th>
<th scope="col">Unique Purchases</th>
<th scope="col">Quantity</th>
<th scope="col">Product Revenue</th>
<th scope="col">Avg. Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Value</th>
<td>18,492</td>
<td>228</td>
<td>350</td>
<td>$4,787.64</td>
<td>$13.68</td>
</tr>
<tr>
<th scope="row">Percentage change</th>
<td>
<span class="text-danger">
<i class="fas fa-caret-down me-1"></i><span>-48.8%%</span>
</span>
</td>
<td>
<span class="text-success">
<i class="fas fa-caret-up me-1"></i><span>14.0%</span>
</span>
</td>
<td>
<span class="text-success">
<i class="fas fa-caret-up me-1"></i><span>46.4%</span>
</span>
</td>
<td>
<span class="text-success">
<i class="fas fa-caret-up me-1"></i><span>29.6%</span>
</span>
</td>
<td>
<span class="text-danger">
<i class="fas fa-caret-down me-1"></i><span>-11.5%</span>
</span>
</td>
</tr>
<tr>
<th scope="row">Absolute change</th>
<td>
<span class="text-danger">
<i class="fas fa-caret-down me-1"></i><span>-17,654</span>
</span>
</td>
<td>
<span class="text-success">
<i class="fas fa-caret-up me-1"></i><span>28</span>
</span>
</td>
<td>
<span class="text-success">
<i class="fas fa-caret-up me-1"></i><span>111</span>
</span>
</td>
<td>
<span class="text-success">
<i class="fas fa-caret-up me-1"></i><span>$1,092.72</span>
</span>
</td>
<td>
<span class="text-danger">
<i class="fas fa-caret-down me-1"></i><span>$-1.78</span>
</span>
</td>
</tr>
</tbody>
</table>
Anatomy
Table head
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">
<thead class="table-light"></thead>
<tbody></tbody>
</table>
| # | 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>
Table foot
| # | 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>
Captions
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>
You can also put the <caption> on the top of the table with
.caption-top.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table caption-top">
<caption>
List of users
</caption>
<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>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
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}.
Vertical clipping/truncation:
Responsive tables make use of overflow-y: hidden, which clips off any content
that goes beyond the bottom or top edges of the table. In particular, this can clip off
dropdown menus and other third-party widgets.
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 |
<div class="table-responsive">
<table class="table"></table>
</div>
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.
These tables may appear broken until their responsive styles apply at specific viewport widths.
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive">
<table class="table"></table>
</div>
<div class="table-responsive-sm">
<table class="table"></table>
</div>
<div class="table-responsive-md">
<table class="table"></table>
</div>
<div class="table-responsive-lg">
<table class="table"></table>
</div>
<div class="table-responsive-xl">
<table class="table"></table>
</div>
<div class="table-responsive-xxl">
<table class="table"></table>
</div>
Customizing in Sass
-
The factor variables (
$table-striped-bg-factor,$table-active-bg-factor&$table-hover-bg-factor) are used to determine the contrast in table variants. -
Apart from the light & dark table variants, theme colors are lightened by the
$table-bg-levelvariable.
$table-cell-padding-y: .5rem;
$table-cell-padding-x: .5rem;
$table-cell-padding-y-sm: .25rem;
$table-cell-padding-x-sm: .25rem;
$table-cell-vertical-align: top;
$table-color: $body-color;
$table-bg: transparent;
$table-striped-color: $table-color;
$table-striped-bg-factor: .05;
$table-striped-bg: rgba($black, $table-striped-bg-factor);
$table-active-color: $table-color;
$table-active-bg-factor: .1;
$table-active-bg: rgba($black, $table-active-bg-factor);
$table-hover-color: $table-color;
$table-hover-bg-factor: .075;
$table-hover-bg: rgba($black, $table-hover-bg-factor);
$table-border-factor: .1;
$table-border-width: $border-width;
$table-border-color: $border-color;
$table-striped-order: odd;
$table-group-seperator-color: currentColor;
$table-caption-color: $text-muted;
$table-bg-level: -9;
$table-variants: (
"primary": color-level($primary, $table-bg-level),
"secondary": color-level($secondary, $table-bg-level),
"success": color-level($success, $table-bg-level),
"info": color-level($info, $table-bg-level),
"warning": color-level($warning, $table-bg-level),
"danger": color-level($danger, $table-bg-level),
"light": $light,
"dark": $dark,
);