Designing HTML Tables for Mobile Devices

If you have an HTML table with multiple columns it likely doesn’t render very nicely on a small smartphone.

One way to solve this problem is to hide lower priority columns when the table is viewed from a mobile device.

First, create a new class in your CSS file, under the @media tag. For example “icol”, for “invisible column”. Configure the column’s display to none when the resolution passes a certain threshold (in this case, 992px)

@media (max-width: 992px) {
    .icol {
        display: none; /* Hide low priority columns on mobile devices */
    }
}

Assign the newly created class to the table columns you wish to hide on mobile devices.

<table>
    <tbody>
    <tr>
        <td>column 1</td>
        <td>column 2</td>
        <td class="icol">hide on mobile</td>
        <td class="icol">hide on mobile</td>
    </tr>
    </tbody>
</table>

Upon refreshing the page on a mobile the device, the columns assigned to class “icol” should no longer be visible.