Bootstrap Table Responsive

HTML tables pose a massive threat to responsive web design. Because tables forcefully expand to fit their data, an overly wide data grid will completely stretch and break your layout on small mobile screens.

Bootstrap solves this with the .table-responsive wrapper class. This creates a scrollable bounding box around the table, allowing the user to swipe left and right to view the hidden data without breaking the structural layout of your website.

1. Always Responsive

To ensure a table never bleeds outside its container, wrap the entire <table> element inside of a <div class="table-responsive">.

(Horizontal scrollbar will appear below if viewed on a screen narrower than the table content.)

<!-- Crucial Wrapper Div -->
<div class="table-responsive">
    <table class="table">
        <!-- A table with 6+ columns of heavy data... -->
    </table>
</div>

2. Breakpoint Specific Responsiveness

Sometimes you only want a table to scroll on phones, but want it to lock into place naturally on desktops where there is plenty of room.

Bootstrap allows you to target specific breakpoints by appending them to the class: .table-responsive{-sm|-md|-lg|-xl|-xxl}.

How Breakpoint Classes Behave:

• .table-responsive-sm: Scrolls only if the screen is narrower than 576px. Otherwise behaves normally.
• .table-responsive-md: Scrolls only if the screen is narrower than 768px.
• .table-responsive-lg: Scrolls only if the screen is narrower than 992px.
• .table-responsive-xl: Scrolls only if the screen is narrower than 1200px.
• .table-responsive-xxl: Scrolls only if the screen is narrower than 1400px.

<!-- This table will ONLY show a scroll bar if viewed on a Phone/Tablet (<992px)
     On Desktop, it will display like a standard, unscrollable table. -->
<div class="table-responsive-lg">
    <table class="table">
        ...
    </table>
</div>