Responsive grid or table using juqery and css
This example shows you how to create responsive table using jquery & css.
Source Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
@media (max-width:767px)
{
.offerstable th
{
display: none;
}
.offerstable td
{
display: inline-block;
margin-top: -1px;
width: 100%;
}
.offerstable td div
{
float: left;
min-width: 120px;
}
.divofferheading.divofferheading
{
display: block !important;
}
.offerstable tr
{
border-bottom: solid 2px #333 !important;
}
}
.offerstable
{
border-collapse: collapse;
border: solid 1px #333;
min-width: 350px;
}
.offerstable th
{
padding: 10px;
color: #FFE100;
background: #333;
}
.offerstable tr
{
border: solid 1px #333;
}
.offerstable td div
{
padding: 10px;
}
.divofferheading.divofferheading
{
display: none;
color: #FFE100;
background: #333;
border-color: #333;
}
.offerstable td a
{
padding: 5px 15px;
color: #333;
background: #FFE100;
border-color: #FFE100;
text-decoration: none;
font-size: 16px;
border-radius: 4px;
white-space: nowrap;
}
.offerstable td a:hover
{
color: #FFE100;
background: #333;
border-color: #333;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function () {
$(".offerstable tbody tr").each(function (ind) {
$(this).find("td").each(function (tdind) {
$(this).html("<div class='divofferheading'>" + $(".offerstable tr").first().find("th:nth-child(" + (tdind + 1) + ")").html() + "</div><div>" + $(this).html() + "</div>");
});
});
});
</script>
</head>
<body>
<table class="offerstable">
<thead>
<tr>
<th>
Market Place
</th>
<th>
Price
</th>
<th>
Offer
</th>
<th>
Delivery timelines
</th>
<th>
Buy Now
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Flipkart
</td>
<td>
12000.00
</td>
<td>
10% Off on SBI Card
</td>
<td>
2 to 3 business days.
</td>
<td>
<a href="http://www.flipkart.com">Buy Now</a>
</td>
</tr>
<tr>
<td>
Paytm
</td>
<td>
12000.00
</td>
<td>
10% Off on SBI Card
</td>
<td>
2 to 3 business days.
</td>
<td>
<a href="http://www.paytm.com">Buy Now</a>
</td>
</tr>
<tr>
<td>
Snapdeal
</td>
<td>
12000.00
</td>
<td>
10% Off on SBI Card
</td>
<td>
2 to 3 business days.
</td>
<td>
<a href="http://www.Snapdeal.com">Buy Now</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
