How to Create a Responsive Table Using CSS, Bootstrap

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.

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 πŸ™‚

Leave a Reply

Your email address will not be published. Required fields are marked *