Transpose HTLM table

Convert html table row to column

by reishabh

HTML

<table>
    <tr>
        <th>Head 1</th>
        <th>Head 2</th>
        <th>Head 3</th>
        <th>Head 4</th>
        <th>Head 5</th>
        <th>Head 6</th>
        <th>Head 7</th>        
    </tr>
    <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
        <td>Row 1 Cell 3</td>
        <td>Row 1 Cell 4</td>
        <td>Row 1 Cell 5</td>
        <td>Row 1 Cell 6</td>
        <td>Row 1 Cell 7</td>
    </tr>
    </table>

CSS

table, th, td{
    border: 1px solid #000;
}
table{
    max-width: 100%;
}
@media screen and (max-width:767px) {
    table tr > *{
        display: block;
    }
    table tr {
        display: table-cell;
        vertical-align: top;
    }
}