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:
responsive example
responsive example