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

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
        
             
      <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
        
             
      <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
        
             
      <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
        
             
      <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
        
             
      <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 class="btn btn-primary">Sign-up</button></th>
              <th><button class="btn btn-primary">Buy Now</button></th>
              <th><button class="btn btn-primary">Buy Now</button></th>
              <th></th>
            </tr>
          </tbody>
        </table>
      </div>