Table responsive

Bootstrap 5 Table responsive component

Responsive table built with the latest Bootstrap 5. Responsive tables allow you to aggregate a huge amount of data and present it in a clear and orderly way.

How it works

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

Vertical clipping/truncation:
Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Basic example

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.

Scroll

Add max-height/max-width and overflow: scroll to enable vertical/horizontal scrolling.

Fixed header

Add position: sticky and top: 0 to thead and th elements.

Dark variant

Add .table-dark to the .table for dark mode.

Pricing

Here's an example of responsive pricing table.

Related resources