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)

1

2

3

4

5

@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.

1

2

3

4

5

6

7

8

9

10

<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.