How to make the existing bootstrap 2 table responsive? - GeeksforGeeks

29 Jul, 2020
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.
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 specificUse .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.ClassScreen Width.table-responsive-sm< 576px.table-responsive-md< 768px.table-responsive-lg< 992px.table-responsive-xl< 1200pxSyntax:<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 :
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.
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 :
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to Add Image into Dropdown List for each items ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?