Transposed Table

Transposing a table with CSS to turn the columns into rows.

by replicateur

HTML

<table class="transpose">
    <thead>
        <tr>
            <th>Head</th>
            <th>Head</th>
            <th>Head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1-1</td>
            <td>Cell 1-2</td>
            <td>Cell 1-3</td>
        </tr>
        <tr>
            <td>Cell 2-1</td>
            <td>Cell 2-2</td>
            <td>Cell 2-3</td>
        </tr>
        <tr>
            <td>Cell 3-1</td>
            <td>Cell 3-2</td>
            <td>Cell 3-3</td>
        </tr>
        <tr>
            <td>Cell 4-1</td>
            <td>Cell 4-2</td>
            <td>Cell 4-3</td>
        </tr>
        <tr>
            <td>Cell 5-1</td>
            <td>Cell 5-2</td>
            <td>Cell 5-3</td>
        </tr>
        <tr>
            <td>Cell 6-1</td>
            <td>Cell 6-2</td>
            <td>Cell 6-3</td>
        </tr>
    </tbody>
</table>

<table class="transpose">
    <thead>
        <tr>
            <th>Head</th>
            <th>Head</th>
            <th>Head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1-1</td>
            <td>Cell 1-2</td>
            <td>Cell 1-3</td>
        </tr>
        <tr>
            <td>Cell 2-1</td>
            <td>Cell 2-2</td>
            <td>Cell 2-3</td>
        </tr>
        <tr>
            <td>Cell 3-1</td>
            <td>Cell 3-2</td>
            <td>Cell 3-3</td>
        </tr>
        <tr>
            <td>Cell 4-1</td>
            <td>Cell 4-2</td>
            <td>Cell 4-3</td>
        </tr>
        <tr>
            <td>Cell 5-1</td>
            <td>Cell 5-2</td>
            <td>Cell 5-3</td>
        </tr>
        <tr>
            <td>Cell 6-1</td>
            <td>Cell 6-2</td>
            <td>Cell 6-3</td>
        </tr>
    </tbody>
</table>

CSS

body {
    font-family: Helvetica, Arial, sans-serif;
}

table {
    border-collapse: collapse;
    margin-bottom: 24px;
}

th, td {
    border: 1px solid black;
    padding: 8px;
}

.transpose thead,
.transpose tbody,
.transpose tr {
    display: inline-block;
}

.transpose tbody tr {
    margin-right: 0;
}

.transpose th,
.transpose td {
    display: block;
}