Responsive Table Using CSS

In this article, I will show you how to make responsive table using CSS only.

In the tabular data, sometimes it’s not easy to manage and your data may end up either very squished together or extend beyond the width of the screen.

So, Here I will show you

How to Make Responsive Table:,

Using the data-attribute data-title to hold information about the respective columns in thead.

<td data-title=”First Name”>Advin</td>

So, the following basic strcture is :

<html>
<head>
<style>
h2{
    color : blue;
    font-family : Georgia, serif;
    text-align : center;
}
table {
    width: 100%;
    text-align: left;
    border : 1px solid #ccc;
    border-collapse: collapse;
}
  
thead{
   background: #6495ED;
}
  
table,td,th {
    border: 1px solid #ddd;
    padding: 10px;
}
tr:nth-child(odd) td { background-color:#fbfbfb } 
tr:nth-child(even) td { background-color:#e8ecee } 
 
@media only screen and (max-width: 767px) {
.table-responsive table,
.table-responsive thead,
.table-responsive tbody,
.table-responsive tr,
.table-responsive th,
.table-responsive td {
 display: block;
}
.table-responsive thead tr {
 position: absolute;
 top: -9999px;
 left: -9999px;
 display: block;
}
table tr {
 border-bottom: 2px solid #ddd;
 display: block;
 margin-bottom: 10px;
}
.table-responsive td {
 position: relative;
 text-align: left;
 padding: 5px 10px 5px calc(50% + 10px);
}
.table-responsive td:before {
 content: attr(data-title);
 position: absolute;
 top: 1px;
 left: 1px;
 width: calc(50% – 20px);
 padding: 5px 10px;
 white-space: nowrap;
 text-align: left;
 font-weight: bold;
}
}
</style>
</head>
<body>
<h2>Responsive Table Using Css </h2>
<div class="table-responsive" >

<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Phone</th>
<th>Company</th>
<th>Job Title</th>
<th>Salary</th>
</tr>
</thead>

<tbody>
<tr>
<td data-title="First Name">Advin</td>
<td data-title="Last Name">Luis</td>
<td data-title="Address">Anderson</td>
<td data-title="Phone No">9904367489</td>
<td data-title="Company">Hybrid Tech</td>
<td data-title="Job Title">.Net Developer</td>
<td data-title="Salary">12000</td>
</tr>
</tbody>

</table>
</div>
</body>
</html>

Hope this will help!!

Aatisha Dalwadi

I am Aatisha Dalwadi.I Started My Journey As Asp .Net Developer At Vision Infotech.I Completed My MCA From Sarvjanik College Of Enginnering AND Technology.Good Experience In Designing And Development Of Web Applications using C# .Net ,ASP.NET , Microsoft .Net Framework.