InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
How to create responsive table in Bootstrap? |
|
Answer» With Bootstrap, you can easily create a responsive table using the table-responsive class. The example below displays a responsive table that adds a horizontal scrollbar for screen less than 992px wide. It looks the same above 992px. Note: Resize the web browser to check the effect <!DOCTYPE html> <html lang="en"> <head> <TITLE>Bootstrap Contextual CLASSES</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <SCRIPT src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Match Timings DATA</h2> <p>The following are the details of the match timings for individuals:</p> <table class="table table-responsive"> <THEAD class="thead-dark"> <tr> <th>Event</th> <th>Timings</th> </tr> </thead> <tbody> <tr class="table-primary"> <td>Entry</td> <td>9AM</td> </tr> <tr class="table-primary"> <td>Session1</td> <td>9:30AM - 11:30AM</td> </tr> <tr class="table-primary"> <td>Lunch</td> <td>11:45AM - 12:15PM</td> </tr> <tr class="table-primary"> <td>Session2</td> <td>12:30PM - 2:30PM</td> </tr> <tr class="table-primary"> <td>Tea</td> <td>2:45PM - 3:00PM</td> </tr> <tr class="table-primary"> <td>Session3</td> <td>3:15PM - 5:15PM</td> </tr> <tr class="table-success"> <td>Presentation</td> <td>5:20PM - 5:45PM</td> </tr> <tr class="table-primary"> <td>Exit</td> <td>After 5:45PM</td> </tr> </tbody> </table> </div> </body> </html>The above displays the following responsive table: |
|