Menu ▼



Posted By :
avatarmrkraju
Total Views : 2195

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





comments powered by Disqus


Search dotnetlearners.com