Responsive design is the primary need to create a good website nowadays. So, a responsive website needs a responsive table. Here, we are going to see how to create a responsive table using CSS and Bootstrap.
Tables are widely used in websites from the very beginning of HTML websites. Table structures were used to create websites, however then a new concept of responsive design occurred. Nowadays, tables are used to list data in a structured form.
Index
Responsive HTML Table (Horizontal Scroll)
Sometimes data tables are too wide to fit in screen size, which may lead to a design bug in your well-designed website. To resolve this issue, we need to create a responsive table that makes it horizontally scrollable.
Method 1 – Using Overflow Property in CSS
In this method, we need to create an outer container of <DIV> tag with Overflow property in CSS. This is the best and simple technique to make any data table responsive using CSS.
Syntax
Overflow: auto;
Example
<!DOCTYPE html>
<html>
<head>
<style>
.responsive_table{
table-layout: fixed;
border-collapse: collapse;
}
.responsive_table .table_head {
background: black;
color:#fff;
}
</style>
</head>
<body>
<div style="overflow:auto;">
<table class="responsive_table">
<tr class="table_head">
<th>Data</th>
<th>Data</th>
<th>Data</th>
<th>Data</th>
<th>Data</th>
</tr>
<tr>
<td>*********************************************************</td>
<td>|||||||||||||||||||||||||||||||||||||||||||||||||||||||||</td>
<td>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++</td>
<td>/////////////////////////////////////////////////////////</td>
<td>&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&</td>
</tr>
<tr>
<td>*********************************************************</td>
<td>|||||||||||||||||||||||||||||||||||||||||||||||||||||||||</td>
<td>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++</td>
<td>/////////////////////////////////////////////////////////</td>
<td>&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&</td>
</tr>
<tr>
<td>*********************************************************</td>
<td>|||||||||||||||||||||||||||||||||||||||||||||||||||||||||</td>
<td>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++</td>
<td>/////////////////////////////////////////////////////////</td>
<td>&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&</td>
</tr>
</table>
</div>
</body>Read Also: How To Create A Fixed Table Header Using CSS
Method 2 – Using Bootstrap table-responsive Class
We can make any bootstrap table responsive using bootstrap’s inbuilt table-responsive class to the outer container.
Example
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="table-responsive"> <table class="table"> <thead> <tr> <th>Data</th> <th>Data</th> <th>Data</th> <th>Data</th> <th>Data</th> </tr> </thead> <tbody> <tr> <td>*********************************************************</td> <td>|||||||||||||||||||||||||||||||||||||||||||||||||||||||||</td> <td>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++</td> <td>/////////////////////////////////////////////////////////</td> <td>&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&</td> </tr> <tr> <td>*********************************************************</td> <td>|||||||||||||||||||||||||||||||||||||||||||||||||||||||||</td> <td>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++</td> <td>/////////////////////////////////////////////////////////</td> <td>&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&</td> </tr> <tr> <td>*********************************************************</td> <td>|||||||||||||||||||||||||||||||||||||||||||||||||||||||||</td> <td>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++</td> <td>/////////////////////////////////////////////////////////</td> <td>&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&</td> </tr> <tbody> </table> </div> </body>
Read Also: How to Create Pagination Using Bootstrap 4 and jQuery
Conclusion
I hope you gained a complete understanding of responsive HTML tables and how to create one. As an overview, we have discussed two methods to create a responsive table.
Enjoy Coding 🙂
