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.

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

Show code Edit in sandbox

HTML

        
             
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Heading</th>
              <th scope="col">Heading</th>
              <th scope="col">Heading</th>
              <th scope="col">Heading</th>
              <th scope="col">Heading</th>
              <th scope="col">Heading</th>
              <th scope="col">Heading</th>
              <th scope="col">Heading</th>
              <th scope="col">Heading</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="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>
              <th scope="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>
              <th scope="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>

Need even more robust tables? Try Data Den.

Quick customization & hyper-focus on data management
Easily integrate it with any project (not only MDB)
Column Pinning, Drag&Drop Columns, Advanced Filtering & much more

For enterprise projects & users seeking advanced data controls. Tailor your data your way.

get early access explore

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.

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

Show code Edit in sandbox

HTML

        
             
      <div class="table-responsive">
        <table class="table"></table>
      </div>
      
      <div class="table-responsive-sm">
        <table class="table"></table>
      </div>
      
      <div class="table-responsive-md">
        <table class="table"></table>
      </div>
      
      <div class="table-responsive-lg">
        <table class="table"></table>
      </div>
      
      <div class="table-responsive-xl">
        <table class="table"></table>
      </div>
      
      <div class="table-responsive-xxl">
        <table class="table"></table>
      </div>

Scroll

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

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
4	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
5	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

Show code Edit in sandbox

HTML
CSS

        
             
      <div class="table-responsive">
        <table class="table"></table>
      </div>

        
            
      .table-responsive {
        max-height: 200px; 
        overflow: scroll;
      }

Fixed header

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

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
4	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
5	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

Show code Edit in sandbox

HTML
CSS

        
             
      <div class="table-responsive">
        <table class="table"></table>
      </div>

        
            
      th, thead{
        position: sticky;
        top: 0;
      }

Dark variant

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

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

Show code Edit in sandbox

HTML

        
             
      <div class="table-responsive">
        <table class="table table-dark"></table>
      </div>

Pricing

Here's an example of responsive pricing table.

	Basic	Standard	Premium	Managed
HDD Storage	700 MB	1,5 GB	50 GB	up to 5T
Web Server
Database	-	Optional
DNS	-	-
Backups	-	-
Tech Support	None	35$/incident	15$/incident	24/7 included
	Free	$99/mo	$179/mo	Contact us

Show code Edit in sandbox

HTML

        
             
      <div class="table-responsive">
        <table class="table table-striped text-successtable-border border-light">
          <thead class="border-light">
            <tr>
              <th scope="col"></th>
              <th scope="col"><strong>Basic</strong></th>
              <th scope="col"><strong>Standard</strong></th>
              <th scope="col"><strong>Premium</strong></th>
              <th scope="col"><strong>Managed</strong></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">HDD Storage</th>
              <td>700 MB</td>
              <td>1,5 GB</td>
              <td>50 GB</td>
              <td>up to 5T</i></td>
            </tr>
            <tr>
              <th scope="row">Web Server</th>
              <td><i class="fas fa-check"></i></td>
              <td><i class="fas fa-check"></i></td>
              <td><i class="fas fa-check"></i></td>
              <td><i class="fas fa-check"></i></td>
            </tr>
            <tr>
              <th scope="row">Database</th>
              <td>-</td>
              <td>Optional</td>
              <td><i class="fas fa-check"></i></td>
              <td><i class="fas fa-check"></i></td>
            </tr>
            <tr>
              <th scope="row">DNS</th>
              <td>-</td>
              <td>-</td>
              <td><i class="fas fa-check"></i></td>
              <td><i class="fas fa-check"></i></td>
            </tr>
            <tr>
              <th scope="row">Backups</th>
              <td>-</td>
              <td>-</td>
              <td><i class="fas fa-check"></i></td>
              <td><i class="fas fa-check"></i></td>
            </tr>
            <tr>
              <th scope="row">Tech Support</th>
              <td>None</td>
              <td>35$/incident</td>
              <td>15$/incident</td>
              <td>24/7 included</td>
            </tr>
            <tr>
              <td></td>
              <td class="fw-bold">Free</td>
              <td class="fw-bold">$99/mo</td>
              <td class="fw-bold">$179/mo</td>
              <td class="fw-bold"><a href>Contact us</a></td>
            </tr>
            <tr>
              <th></th>
              <th><button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Sign-up</button></th>
              <th><button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Buy Now</button></th>
              <th><button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Buy Now</button></th>
              <th></th>
            </tr>
          </tbody>
        </table>
      </div>

Table responsive

Bootstrap 5 Table responsive component

How it works

Basic example

Breakpoint specific

Scroll

Fixed header

Dark variant

Pricing

Related resources