Table

Overview

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

Using the most basic table markup, here’s how .table-based tables look in Bootstrap.

Variants

Use contextual classes to color tables, table rows or individual cells.

Striped rows

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

Hoverable rows

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

Active tables

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

Bordered tables

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

Tables without borders

Add .table-borderless for a table without borders.

Small tables

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

Nesting

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

Table foot

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.

Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

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.