Bootstrap Responsive Table for Data Listing
The HTML tables are the most used element in the web application. Basically, the HTML table is used to present the data in row and columns on the web page. It most preferable to make tables responsive for better user experience. If your web application uses Bootstrap, you can easily build a table design within a minute. Also, you can make Bootstrap table responsive by adding a single class.
In this tutorial, we will show you how to create a responsive table with Bootstrap. Using Bootstrap you can improve the appearance of the HTML table in an easy way. The Bootstrap responsive table is the perfect choice for data listing.
The following different types of table examples helps you to create horizontal tables with basic styling using Bootstrap.
The Bootstrap and jQuery library need to be included to use Bootstrap framework.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Basic Bootstrap Responsive Table
Use table
class to add basic style to the HTML table. The table-responsive
class makes table responsive.
<table class="table table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Smith</td> <td>Thomas</td> <td>[email protected]</td> </tr> <tr> <td>Merry</td> <td>Jim</td> <td>[email protected]</td> </tr> </tbody> </table>

Striped Bootstrap Responsive Table
Use table-striped
class to add stripes to the HTML table.
<table class="table table-responsive table-striped"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Smith</td> <td>Thomas</td> <td>[email protected]</td> </tr> <tr> <td>Merry</td> <td>Jim</td> <td>[email protected]</td> </tr> </tbody> </table>

Hover Bootstrap Responsive Table
Use table-hover
class to add a hover effect to the HTML table rows.
<table class="table table-responsive table-hover"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Smith</td> <td>Thomas</td> <td>[email protected]</td> </tr> <tr> <td>Merry</td> <td>Jim</td> <td>[email protected]</td> </tr> </tbody> </table>

Bordered Bootstrap Responsive Table
Use table-bordered
class to add borders to the HTML table.
<table class="table table-responsive table-bordered"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Smith</td> <td>Thomas</td> <td>[email protected]</td> </tr> <tr> <td>Merry</td> <td>Jim</td> <td>[email protected]</td> </tr> </tbody> </table>

Comments 0