Open In App

How to make the existing bootstrap 2 table responsive?

Last Updated : 29 Jul, 2020
Improve
Improve
Like Article
Like
Save
Share
Report
  • Method 1:

    To make the table responsive on all viewport size, wrap the table within a opening and closing <div> tags, having class “table-responsive” within the opening <div> tag.

    Syntax:

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

    Example: The example describe the “table-responsive” Class.




    <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
        <!-- Required meta tags -->
        <meta charset="utf-8"> 
        <meta name="viewport"
              content="width=device-width, 
                       initial-scale=1, 
                       shrink-to-fit=no"> 
      
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" 
              href=
    "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
              integrity=
    "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
              crossorigin="anonymous"> 
      
        <title>Bootstrap | Tables</title> 
      
        <style> 
        h1{ 
            color:blue; 
            text-align: center; 
        } 
        div{ 
            margin-top: 20px; 
        } 
        </style> 
      
    </head> 
    <body> 
        <div class="container"> 
        <h1>Bootstrap Table Responsive</h1> 
      
        <!-- table-responsive -->
        <div class="table-responsive"> 
              
            <!-- table -->
            <table class="table"> 
            <thead> 
                <tr> 
                <th scope="col">Head</td> 
                <th scope="col">Head</td> 
                <th scope="col">Head</td> 
                <th scope="col">Head</td> 
                <th scope="col">Head</td> 
                <th scope="col">Head</td> 
                <th scope="col">Head</td> 
                <th scope="col">Head</td> 
                <th scope="col">Head</td> 
                <th scope="col">Head</td> 
                <th scope="col">Head</td> 
                <th scope="col">Head</td> 
                </tr> 
            </thead> 
            <tbody> 
                <tr> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                </tr> 
                <tr> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                </tr> 
                <tr> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                <td>Data</td> 
                </tr> 
            </tbody> 
            </table> 
      
        </div> 
        </div> 
    </body> 
    </html>
    		 

    

    

    
                        
    

    

    

    

    Output:
    

    When window size is normal:
    

    

    When Window size is small i.e tablet mode:
    

    Scroll bar will appear in tablet as well as mobile mode.
    

    • 

  • Method 2: Breakpoint specific

    Use .table-responsive{-sm|-md|-lg|-xl} 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.
    

    

    


    
 Class
 Screen Width 

    

    
 .table-responsive-sm 
< 576px

    

    
 .table-responsive-md 
 < 768px

    

    
 .table-responsive-lg 
 < 992px

    

    
 .table-responsive-xl 
 < 1200px

    
    

    

    

    Syntax:
    

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

    

    Example: The example describe the “table-responsive-sm” Class .
    

    

    

    

    

    
                                    
    

    

                                        
    
                                    
    

    

                                        
    

    

                                        
    
                                    
    
                                    
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html>  
    

    <html lang="en">  
    

    <head>  
    

        <!-- Required meta tags -->
    

        <meta charset="utf-8">  
    

        <meta name="viewport"
    

              content="width=device-width,  
    

              initial-scale=1,  
    

              shrink-to-fit=no">  
    

      
    

        <!-- Bootstrap CSS -->
    

        <link rel="stylesheet" 
    

              href= 
    

    "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
    

              integrity= 
    

    "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
    

              crossorigin="anonymous">  
    

      
    

        <title>Bootstrap | Tables</title>  
    

      
    

        <style>  
    

        h1{  
    

            color:blue;  
    

            text-align: center;  
    

        }  
    

        div{  
    

            margin-top: 20px;  
    

        }  
    

        </style>  
    

      
    

    </head>  
    

    <body>  
    

        <div class="container">  
    

        <h1>Bootstrap Table Responsive-sm</h1>  
    

      
    

        <!-- table-responsive -->
    

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

              
    

            <!-- table -->
    

            <table class="table">  
    

            <thead>  
    

                <tr>  
    

                <th scope="col">Head</td>  
    

                <th scope="col">Head</td>  
    

                <th scope="col">Head</td>  
    

                <th scope="col">Head</td>  
    

                <th scope="col">Head</td>  
    

                <th scope="col">Head</td>  
    

                <th scope="col">Head</td>  
    

                <th scope="col">Head</td>  
    

                <th scope="col">Head</td>  
    

                <th scope="col">Head</td>  
    

                <th scope="col">Head</td>  
    

                <th scope="col">Head</td>  
    

                </tr>  
    

            </thead>  
    

            <tbody>  
    

                <tr>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                </tr>  
    

                <tr>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                </tr>  
    

                <tr>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                <td>Data</td>  
    

                </tr>  
    

            </tbody>  
    

            </table>  
    

      
    

        </div>  
    

        </div>  
    

    </body>  
    

    </html>
    

    
    		

    
    

    

    

    

    

    

    
                        
    

    

    

    
                        
    

    

    

    

    Output:
    

    when window size is > 576px :
    

    

    When window size  is less than < 576px :
    

    • 



                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        How to make Text Responsive in Bootstrap ?
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bootstrap 5 Table Always responsive
            

        
    
        
            

                How to Create a Responsive Table in Bootstrap ?
            

        
    
        
            

                How to make Bootstrap table with sticky table head?
            

        
    
        
            

                How to make iframe Responsive in Bootstrap ?
            

        
    
        
            

                How to make Form Responsive using Bootstrap ?
            

        
    
        
            

                How to make Text Responsive in Bootstrap ?
            

        
    
        
            

                How to make Responsive Carousel in Bootstrap ?
            

        
    
        
            

                How to group elements in first table column with bootstrap-table ?
            

        
    
        
            

                How to add table footers with react-bootstrap-table?
            

        
    
        
            

                Angular PrimeNG Table Responsive
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
D

        

            
        

        

                                    


                                    

                                        deepak710agarwal                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  






    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox