Make Tables Responsive – HTML and CSS example for Non-WordPress sites

This page shows the main concept used in the Make Tables Responsive WordPress plugin. You don’t need to use this code if you are using the WordPress plugin.

HTML code:

<table class="responsive-table">
    <tbody>
        <tr>
            <th>Column A</th>
            <th>Column B</th>
            <th>Column C</th>
            <th>Column D</th>
            <th>Column E</th>
        </tr>
        <tr>
            <td data-my-column="Column A">
                <div class="my-div">Cell A1</div>
            </td>
            <td data-my-column="Column B">
                <div class="my-div">Cell B1</div>
            </td>
            <td data-my-column="Column C">
                <div class="my-div">Cell C1</div>
            </td>
            <td data-my-column="Column D">
                <div class="my-div">Cell D1</div>
            </td>
            <td data-my-column="Column E">
                <div class="my-div">Cell E1</div>
            </td>
        </tr>
        <tr>
            <td data-my-column="Column A">
                <div class="my-div">Cell A2</div>
            </td>
            <td data-my-column="Column B">
                <div class="my-div">Cell B2</div>
            </td>
            <td data-my-column="Column C">
                <div class="my-div">Cell C2</div>
            </td>
            <td data-my-column="Column D">
                <div class="my-div">Cell D2</div>
            </td>
            <td data-my-column="Column E">
                <div class="my-div">Cell E2</div>
            </td>
        </tr>
    </tbody>
</table>

CSS code:

@media (max-width: 650px) {

    .responsive-table tr,
    .responsive-table td {
    	display: block;
        clear: both;
        height: auto;
    }

    .responsive-table td {
    	text-align: right;
        width: auto;
        box-sizing: border-box;
        overflow: auto;
    }

    .responsive-table tr:nth-child(even),
    .responsive-table tr:nth-child(even) td {
        background: #ffffff;
    }

    .responsive-table tr:nth-child(odd),
    .responsive-table tr:nth-child(odd) td {
        background: #dddddd;
    }

    .responsive-table td {
        padding: 5px 10px;
    }

    .responsive-table td[data-my-column]:before {
    	display: inline-block;
    	content: attr(data-my-column);
    	float: left;
        text-align: left;
        white-space: pre-line;
    }

    .responsive-table tr:first-of-type {
    	display: none;
    }

    .responsive-table .my-div {
        max-width: 49%;
        display: inline-block;
    }

    .responsive-table td[data-my-column]:before {
        max-width: 49%;
    }

}

See it in action: