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>

Responsive CSS - It's Begining

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    html {
        font-family: sans-serif;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%
    }

    .component {
        width: 33.33333333%;
        float: left;
        border: none;
        text-align: center;
    }

    .component .element {
        border: 1px solid #a7a7a7;
        padding: 10px;
    }

    /* For Tablets */
    @media screen and (min-width: 600px) and (max-width: 999px) {
        .component {
            width: 50%;
        }
    }

    /* For Mobiles */
    @media screen and (min-width: 0px) and (max-width: 599px) {
        .component {
            width: 100%;
        }
    }
</style>

<div>
    <div class="component"><div class="element">A</div></div>
    <div class="component"><div class="element">B</div></div>
    <div class="component"><div class="element">C</div></div>
    <div class="component"><div class="element">D</div></div>
    <div class="component"><div class="element">E</div></div>
    <div class="component"><div class="element">F</div></div>
</div>