Designing HTML Tables for Mobile Devices

By | February 4, 2016

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)

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

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

Leave a Reply

Your email address will not be published.