Responsive Table

Responsive Table - Table to stacked table.

by Nirvanachain

HTML

<table>
    <thead>
        <tr>
            <th>Country</th> 
            <th>Desktop Share</th>
            <th>Table Share</th>
            <th>Mobile Share</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-th="Country">India</td>
            <td data-th="Desktop Share">32%</td>
            <td data-th="Table Share">1%</td>
            <td data-th="Mobile Share">67%</td>
        </tr>
        <tr>
            <td data-th="Country">GB</td>
            <td data-th="Desktop Share">69%</td>
            <td data-th="Table Share">13%</td>
            <td data-th="Mobile Share">18%</td>
        </tr>
        <tr>
            <td data-th="country">US</td>
            <td data-th="Desktop Share">69%</td>
            <td data-th="Table Share">9%</td>
            <td data-th="Mobile Share">22%</td>
        </tr>
        <tr>
            <td data-th="country">China</td>
            <td data-th="Desktop Share">86%</td>
            <td data-th="Table Share">4%</td>
            <td data-th="Mobile Share">10%</td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 100%;
}

thead {
    display: none;
    font-weight: bold;
}

tbody {
    text-align: center;
}

td {
    display: block;
    position: relative;
    padding-left: 50%;
    padding-top: 13px;
    padding-bottom: 13px;
    background-color: #e9e9e9;
    text-align: left;
}

td:before {
    content: attr(data-th) " :";
    display: inline-block;
    background-color: #e9e9e9;
    color: #000000;
    border-right: 2px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 33%;
    max-height: 100%;
    font-size: 16px;
    font-weight: 300;
    padding-left: 13px;
    padding-top: 13px;
}

@media screen and (min-width: 400px) {
    thead {
        display: table-header-group;
    }
    
    td {
        display: table-cell;
        padding-left: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    td:before {
        content: '';
        display: inherit;
        background-color: #e9e9e9;
        color: #000000;
        border-right: inherit;
        position: static;
        padding-left: inherit;
        padding-top: inherit;
}