Create Responsive Table with Bootstrap



To create a responsive table with Bootstrap, use the table-responsive class.

You can try to run the following code to form a responsive table −

Example

Live Demo

<!DOCTYPE html> <html>    <head>       <title>Bootstrap Table</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">       <script src = "/scripts/jquery.min.js"></script>       <script src = "/bootstrap/js/bootstrap.min.js"></script>    </head>    <body>       <div class = "table-responsive">          <table class = "table">             <thead>                <tr>                   <th>Subject</th>                   <th>Marks</th>                   <th>Type</th>                </tr>             </thead>             <tbody>                <tr>                   <td>Java</td>                   <td>90</td>                   <td>Programming Language</td>                </tr>                <tr>                   <td>PHP</td>                   <td>92</td>                   <td>Scrpting Language</td>                </tr>                <tr>                   <td>jQuery</td>                   <td>80</td>                   <td>JavaScript Library</td>                </tr>             </tbody>          </table>       </div>    </body> </html>
Updated on: 2020-06-12T13:34:18+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements