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



Similar Reads

Bootstrap 5 Table Always responsive
Bootstrap 5 Table Always responsive is used for horizontal scrolling of the table across all the viewports or specific viewports. To scroll the table horizontally for all the viewports, we can add a class table-responsive. Bootstrap 5 Table Always responsive Class: table-responsive: This class is used to scroll the table horizontally. Syntax: &lt;d
2 min read
How to Create a Responsive Table in Bootstrap ?
A responsive table in Bootstrap adjusts its layout to fit different screen sizes, ensuring readability and usability on all devices. It typically involves using classes like .table-responsive or custom CSS to enable horizontal scrolling on smaller screens. Table of Content Using the table-responsive classUsing the table-scrollable class Using the B
4 min read
How to make Bootstrap table with sticky table head?
A Bootstrap table with a sticky table head is a table layout where the header row remains fixed at the top of the viewport while scrolling through the table's content. This ensures continuous visibility of column headers, improving data readability and navigation within the table. Syntax: In the CSS file:&lt;style&gt; .header{ position:sticky; top:
3 min read
How to make Form Responsive using Bootstrap ?
We are going to create a responsive form by using Bootstrap 5. responsiveness is a feature that allows users to interact with the web app on any device easily. It helps to create better UI interactions and a better user experience that can be a reason to have great traffic on the respective website. These are the following methods to make a form re
4 min read
How to make Responsive Carousel in Bootstrap ?
Bootstrap Responsive Carousel simplifies the creation of responsive carousels for dynamic content display. Utilize the Carousel component with a suitable HTML structure, ensuring proper sizing and responsive breakpoints for optimal display across devices. ApproachCreate an HTML document with Bootstrap for styling. Create a container with a centered
2 min read
How to make Text Responsive in Bootstrap ?
Making text responsive in Bootstrap involves using responsive typography utilities like .text-sm, .text-md, etc., to ensure text adapts to different screen sizes. This ensures readability and maintains visual hierarchy across devices. Below are the approaches to making text responsive in Bootstrap: Table of Content Using fs classUsing display class
3 min read
How to make iframe Responsive in Bootstrap ?
A responsive iframe in Bootstrap refers to embedding an iframe within a container that adjusts its size and aspect ratio based on the screen size, ensuring proper display and usability across various devices and viewports. ApproachIn this approach, we are using Bootstrap's Embed Responsive Classes. Bootstrap provides embed-responsive classes to mak
2 min read
How to group elements in first table column with bootstrap-table ?
Bootstrap is a front-end framework that is used for developing responsive and mobile-first websites. It is an open-source collection of tools that includes HTML and CSS-based design templates for typography, forms, buttons, navigation, and other interface components, as well as JavaScript plugins for transitions, modals, and other interactive featu
4 min read
How to add table footers with react-bootstrap-table?
In this article we are going to learn about table footers with react-bootstrap-table.Table footers in React-Bootstrap-Table enable custom content at the bottom of a table. They're created either by defining footer content within column definitions or by rendering a separate footer element outside the table, allowing for summary information or custo
3 min read
Angular PrimeNG Table Responsive
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use Table Responsive in Angular PrimeNG. Angular PrimeNG Table Responsive is used to make the Table component respons
4 min read