How to make table responsive in Bootstrap?

Responsive tables allow tables to be scrolled horizontally with ease. You can make any table responsive across all viewports by wrapping a .table with .table-responsive class. 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.

<divclass="table-responsive"><tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">Heading</th><thscope="col">Heading</th><thscope="col">Heading</th><thscope="col">Heading</th><thscope="col">Heading</th><thscope="col">Heading</th><thscope="col">Heading</th><thscope="col">Heading</th><thscope="col">Heading</th></tr></thead><tbody><tr><thscope="row">1</th><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr><tr><thscope="row">2</th><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr><tr><thscope="row">3</th><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr></tbody></table></div>

Much more examples and a detailed description can be found at 📄 Documentation page