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:
Useful Tools
Online Code Editor and Compiler
HTML Minifier
Online HTML Compiler/Preivew
Word Count Tool
Replace Text/Word tool
Latest Blogs
How to check if a canvas is empty or blank
Maintain div or panel scroll position after postback in asp.net update panel
Draggable button using jquery ui
Get total number of tables, views, stored procedures and functions count and names in sql server
JavaScript function to get date in mmddyyyy hhmmss ampm forma