---

Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

Overview

Due to the widespread use of <table> elements across third-party widgets like calendars and date pickers, Bootstrap 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.

Variants

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

Accented tables

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.

Table borders

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.

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. 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}.

Always responsive

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

---