Responsive HTML CSS Table For Blogger/ Updated 2022

HTML CSS Responsive Table For Blogger

Are you looking for a stylish and responsive table for your blogger blog. Now let's check it; Here is a profession Responsive HTML CSS Table and easy guide to add blogger is provides all the features of a table online.

Hi friends, Welcome to our Blogger family. Today I'm going to share an easy tutorial, about How can we add Responsive HTML CSS Table In Blogger. As we know the Responsivness is essential because there are different screens or end devices such as PC, Laptops, Mobile, tabs, etc.

Do you want to generate Meta tags? Then here is a free blogger meta tag generator tool is availabe to you. This Blogger meta tag generator will help you create meta tag quickly.

Now Let's Discuss First; What a responsive table is?

Add Responsive HTML CSS Table In Blogger/Website

What is Responsive HTML/CSS Table?

A Responsive HTML/CSS Table is maded up with HTML5's markup tags and stylised with advance CSS to make it device compatible. In simple words it is a flexible and adaptive in any browser/Screen size. A responsive table always display and align the content of the table correctly on the end devices.

How to Add Responsive HTML/CSS Table in Blogger

• 
  Step1) Go to The Blogger Dashboard Create a new post in it.
  


• 
  Step2) After Creating/Editing Posts, where you want to add this HTML & CSS Table.
  


• 
  Step3) After Inserting this code click on Publish or Update Posts.
  

<style>
            table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            margin: 0;
            padding: 0;
            width: 100%;
            table-layout: fixed;
        }

        table caption {
            font-size: 1.5em;
            margin: .5em 0 .75em;
        }

        table tr {
            background-color: #fff;
            border: 1px solid #e1e5e9;
            padding: .35em;
            border-radius: 3px;
        }

        table thead tr:first-child {
            border: 1px solid #0f82e6;
        }

        table th,
        table td {
            padding: 1.625em;
            text-align: center;
            color: #9da9b9;
            font-size: 14px;
            font-family: cursive;
        }

        table td:nth-child(4) {
            font-size: 18px;
        }

        table th {
            font-size: .85em;
            letter-spacing: .1em;
            text-transform: uppercase;
            background: #0f82e6;
            color: #FFF;
        }

        table tbody tr td .btn-invoice {
            background: #0f82e6;
            color: #FFF;
            font-size: 13px;
            padding: 10px 20px;
            border: 0;
            font-family: cursive;
        }

        tbody tr:nth-child(even) {
            background-color: #eee;
        }

        tbody tr:nth-child(odd) {
            background-color: #fff;
        }

        @media screen and (max-width: 750px) {
            table {
                border: 0;
            }
            table caption {
                font-size: 1.3em;
            }
            table thead {
                border: none;
                clip: rect(0 0 0 0);
                height: 1px;
                margin: -1px;
                overflow: hidden;
                position: absolute;
                width: 1px;
                padding: 0;
            }
            table tr {
                border-bottom: 3px solid #e1e5e9;
                display: block;
                margin-bottom: .625em;
            }
            table th,
            table td {
                padding: 0.625em;
            }
            table td {
                border-bottom: 1px solid #e1e5e9;
                display: block;
                font-size: .8em;
                text-align: right;
                color: #9da9b9;
            }
            table td::before {
                content: attr(data-label);
                float: left;
                font-weight: bold;
                text-transform: uppercase;
                color: #656971;
            }
            table td:last-child {
                border-bottom: 0;
            }
            table td:nth-child(4) {
                font-size: 0.8em;
            }
    </style>
    <table>
        <thead>
            <tr>
                <th><label><span style="font-size: large;">GST</span></label></th>
                <th><label><span style="font-size: large;">Details</span></label></th>
                <th><label><span style="font-size: large;">Due Date</span></label></th>
                <th><label><span style="font-size: large;">Amount</span></label></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-label="Invoice"><span style="font-size: large;">GST_dummy_Value</span></td>
                <td data-label="Details"><span style="font-size: large;">Tax</span></td>
                <td data-label="Due Date"><span style="font-size: large;">August 13, 2022</span></td>
                <td data-label="Amount"><span style="font-size: large;">$78.00</span></td>

            </tr>
            <tr>
                <td data-label="Invoice"><span style="font-size: large;">GST_dummy_Value</span></td>
                <td data-label="Details"><span style="font-size: large;">Tax</span></td>
                <td data-label="Due Date"><span style="font-size: large;">July 13, 2023</span></td>
                <td data-label="Amount"><span style="font-size: large;">$56.00</span></td>
               
            </tr>
            <tr>
                <td data-label="Invoice"><span style="font-size: large;">GST_dummy_Value</span></td>
                <td data-label="Details"><span style="font-size: large;">Tax</span></td>
                <td data-label="Due Date"><span style="font-size: large;">June 13, 2027</span></td>
                <td data-label="Amount"><span style="font-size: large;">$46.00</span></td>
              
            </tr>
            <tr>
                <td data-label="Invoice"><span style="font-size: large;">GST_dummy_Value</span></td>
                <td data-label="Details"><span style="font-size: large;">Tax</span></td>
                <td data-label="Due Date"><span style="font-size: large;">May 13, 2021</span></td>
                <td data-label="Amount"><span style="font-size: large;">$28.00</span></td>
            </tr>
        </tbody>
    </table>