Responsive CSS: Responsive Table Data Representation

We can easily display our tables in table view for normal browser and list view for mobile device easily. Below is a code snippet:

<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style type="text/css">
    .responsive {
        width: 100%;
        font-size: 18px;
    }
    .responsive thead td {
        padding: 7px;
        background-color: #8b91a2;
    }
    .responsive tbody td {
        padding: 7px;
    }
    .responsive .visible-xs {
        display: none;
    }
    @media screen and (min-width: 0px) and (max-width: 768px) {
        .responsive td {
            font-size: 18px;
        }
        .responsive .hidden-xs {
            display: none !important;
        }
        .responsive .visible-xs {
            display: table-row !important;
        }
        .responsive tbody td {
            display: block;
            width: 100%;
            border: 0 !important;
            box-sizing: border-box !important;
            padding: 0 10px !important;
            font-size: 24px;
        }
        .responsive .separator {
            display: inline-block !important;
            background-color: moccasin;
            width: 100%;
            height: 7px
        }
    }
</style>
<table class="responsive">
    <thead>
    <tr class="hidden-xs">
        <td>NAME</td>
        <td>ROLL</td>
        <td>STATUS</td>
        <td>GPA</td>
    </tr>
    </thead>
    <tbody>
    <tr><td class="visible-xs separator" colspan="4"><div>&nbsp;</div></td></tr>
    <tr>
        <td><span class="visible-xs">NAME:</span>Pritom</td>
        <td><span class="visible-xs">ROLL:</span>00303</td>
        <td><span class="visible-xs">STATUS:</span>PASSED</td>
        <td><span class="visible-xs">GPA:</span>4.50</td>
    </tr>
    <tr><td class="visible-xs separator" colspan="4"><div>&nbsp;</div></td></tr>
    <tr>
        <td><span class="visible-xs">NAME:</span>Pritom</td>
        <td><span class="visible-xs">ROLL:</span>00304</td>
        <td><span class="visible-xs">STATUS:</span>PASSED</td>
        <td><span class="visible-xs">GPA:</span>4.51</td>
    </tr>
    <tr><td class="visible-xs separator" colspan="4"><div>&nbsp;</div></td></tr>
    <tr>
        <td><span class="visible-xs">NAME:</span>Pritom</td>
        <td><span class="visible-xs">ROLL:</span>00305</td>
        <td><span class="visible-xs">STATUS:</span>PASSED</td>
        <td><span class="visible-xs">GPA:</span>4.52</td>
    </tr>
    <tr><td class="visible-xs separator" colspan="4"><div>&nbsp;</div></td></tr>
    <tr>
        <td><span class="visible-xs">NAME:</span>Pritom</td>
        <td><span class="visible-xs">ROLL:</span>00306</td>
        <td><span class="visible-xs">STATUS:</span>PASSED</td>
        <td><span class="visible-xs">GPA:</span>4.53</td>
    </tr>
    <tr><td class="visible-xs separator" colspan="4"><div>&nbsp;</div></td></tr>
    <tr>
        <td><span class="visible-xs">NAME:</span>Pritom</td>
        <td><span class="visible-xs">ROLL:</span>00307</td>
        <td><span class="visible-xs">STATUS:</span>PASSED</td>
        <td><span class="visible-xs">GPA:</span>4.54</td>
    </tr>
    <tr><td class="visible-xs separator" colspan="4"><div>&nbsp;</div></td></tr>
    <tr>
        <td><span class="visible-xs">NAME:</span>Pritom</td>
        <td><span class="visible-xs">ROLL:</span>00308</td>
        <td><span class="visible-xs">STATUS:</span>PASSED</td>
        <td><span class="visible-xs">GPA:</span>4.55</td>
    </tr>
    <tr><td class="visible-xs separator" colspan="4"><div>&nbsp;</div></td></tr>
    </tbody>
</table>