How to make the existing bootstrap 2 table responsive?

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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 .

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    when window size is > 576px :

    When window size  is less than < 576px :




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.