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 *

Read previous post:
center background image with css
How to Center Background Images in Div Tag With CSS

Many times designers face an issue with centering background images using CSS. Here we will discuss how to center background...

Close