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.

#	Head	Head	Head
1	Data	Data	Data
2	Data	Data	Data
3	Data	Data	Data

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

#	Head	Head	Head
1	Data	Data	Data

#	Head	Head	Head
1	Data	Data	Data

#	Head	Head	Head
1	Data	Data	Data

#	Head	Head	Head
1	Data	Data	Data

#	Head	Head	Head
1	Data	Data	Data

#	Head	Head	Head
1	Data	Data	Data

#	Head	Head	Head
1	Data	Data	Data

#	Head	Head	Head
1	Data	Data	Data

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:

#	Head	Head	Head
1	Data	Data	Data
2	Data	Data	Data
3	Data	Data	Data

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.

#	Head	Head	Head
1	Data	Data	Data
Subhead Subhead Subhead A Subdata Subdata B Subdata Subdata C Subdata Subdata
3	Data	Data	Data

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

#	Head	Head	Head
1	Data	Data	Data
2	Data	Data	Data
Foot	Foot	Foot	Foot

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.

#	Head	Head	Head
1	Data	Data	Data
2	Data	Data	Data
3	Long data		Data

Add .table-borderless for a table without borders.

#	Head	Head	Head
1	Data	Data	Data
2	Data	Data	Data
3	Long data		Data

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

#	Head	Head	Head
1	Data	Data	Data
2	Data	Data	Data
3	Data	Data	Data

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

#	Head	Head	Head
1	Data	Data	Data
2	Data	Data	Data
3	Data	Data	Data

These classes can also be added to table variants:

#	Head	Head	Head
1	Data	Data	Data
2	Data	Data	Data
3	Data	Data	Data

#	Head	Head	Head
1	Data	Data	Data
2	Data	Data	Data
3	Data	Data	Data

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

#	Head	Head	Head
1	Data	Data	Data
2	Data	Data	Data
3	Long data		Data

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).

#	Head	Head	Head
1	Data	Data	Data
2	Data	Data	Data
3	Long data		Data

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.

List of users

#	Head	Head	Head
1	Data	Data	Data

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