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 independent from the parent.

Use contextual classes to color tables, table rows or individual cells (e.q .table-primary).

Add .table-hover to enable a hover state on table rows within a <tbody>.

These hoverable rows can also be combined with the striped variant:

Highlight a table row or cell by adding a .table-active class.

Border styles, active styles, and table variants are not inherited by nested tables.

Use the modifier classes .table-{color} to <thead>.

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.

Add .table-bordered for borders on all sides of the table and cells.

Add .table-borderless for a table without borders.

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Use .table-striped-columns to add zebra-striping to any table column.

These classes can also be added to table variants:

Add .table-sm to make any .table more compact by cutting all cell padding in half.

Add a thicker border, darker between table groups—<thead>, <tbody>, and <tfoot>—with .table-group-divider. Customize the color by changing the border-top-color (which we don’t currently provide a utility class for at this time).

Make your tables always responsive, use .table-responsive for horizontally scrolling tables.

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.

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.

You can also put the <caption> on the top of the table with .caption-top.