# Bootstrap 5 Tables
Bootstrap 5 table examples for AdminKit: striped, hover and bordered rows, contextual colors, small tables, vertical alignment and responsive scrolling.
## Example
Using the most basic table markup, here's how `.table`-based tables look in Bootstrap.
```html
#
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.
```html
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
```
## Accented tables
### Striped rows
Use `.table-striped` to add zebra-striping to any table row within the ``.
```html
...
```
These classes can also be added to table variants:
```html
...
```
```html
...
```
### Hoverable rows
Add `.table-hover` to enable a hover state on table rows within a ``.
```html
...
```
```html
...
```
These hoverable rows can also be combined with the striped variant:
```html
...
```
### Active tables
Highlight a table row or cell by adding a `.table-active` class.
```html
...
...
...
3
Larry the Bird
@twitter
```
```html
...
...
...
3
Larry the Bird
@twitter
```
## Table borders
### Bordered tables
Add `.table-bordered` for borders on all sides of the table and cells.
```html
...
```
[Border color utilities](/bootstrap/docs/utilities/borders/#border-color) can be added to change colors:
```html
...
```
### Tables without borders
Add `.table-borderless` for a table without borders.
```html
...
```
```html
...
```
## Small tables
Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` in half.
```html
...
```
```html
...
```
## Vertical alignment
Table cells of `` are always vertical aligned to the bottom. Table cells in `` inherit their alignment from `
` and are aligned to the top by default. Use the [vertical align](/bootstrap/docs/utilities/vertical-align/) classes to re-align where needed.
```html
...
...
...
...
...
This cell is aligned to the top.
...
```
## Nesting
Border styles, active styles, and table variants are not inherited by nested tables.
```html
...
...
...
...
```
## Anatomy
### Table head
Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make ``s appear light or dark gray.
```html
...
...
```
```html
...
...
```
### Table foot
```html
...
...
...
```
### Captions
A `
` works 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.
```html
List of users
...
...
```
You can also put the `
` on the top of the table with `.caption-top`.
```html
List of users
#
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. 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.
```html
...
```
### 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.
```html
...
...
...
...
...
...
```
## About
Due to the widespread use of `
` elements across third-party widgets like calendars and date pickers, Bootstrap's tables are **opt-in**. Add the base class `.table` to any `
`, 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.
---
Canonical HTML page: https://adminkit.io/bootstrap/docs/components/tables/
Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io