Bootstrap 5 Tables

Basic Table

A basic Bootstrap 5 table has a light padding and horizontal dividers.

The .table class adds basic styling to a table:

Striped Rows

The .table-striped class adds zebra-stripes to a table:

Bordered Table

The .table-bordered class adds borders on all sides of the table and cells:

Hover Rows

The .table-hover class adds a hover effect (grey background color) on table rows:

Black/Dark Table

The .table-dark class adds a black background to the table:

Dark Striped Table

Combine .table-dark and .table-striped to create a dark, striped table:

Hoverable Dark Table

The .table-hover class adds a hover effect (grey background color) on table rows:

Borderless Table

The .table-borderless class removes borders from the table:

Contextual Classes

Contextual classes can be used to color the whole table (<table>),  the table rows (<tr>) or table cells (<td>).

The contextual classes that can be used are:

Table Head Colors

You can also use any of the contextual classes to only add a background color to the table header:

Small table

The .table-sm class makes the table smaller by cutting cell padding in half:

Responsive Tables

The .table-responsive class adds a scrollbar to the table when needed (when it is too big horizontally):

You can also decide when the table should get a scrollbar, depending on the screen width: