Can tables ‘work’ on smartphones

Can tables ‘work’ on smartphones

Responsive coding and layout has come a long way – but there are some content elements which still struggle to negotiate the journey from (wide) desktop to (narrow) smartphones. Tables!

For a lot of research based web pages – tables are an imperative and economical way of displaying relationships between, quite often, busy data. They often need several columns and generally have a good mix of short and long text descriptions and possibly images. Tables are a very efficient way of showing comparisons or listing grouped data.

Although a table can be set to 100% of the page width … with each of the columns ‘crushing’ their content to ever narrowing widths – there comes a point where the table hits a ‘brick wall’, defined by the longest word in each column. Even with media queries to reduce the font size, this can ultimately have a table which will not ‘fit’ and either be cropped off or force the web page to reduce to accommodate the wider table.

responsive-tablesObviously keeping the table in it’s traditional wide aspect is only going to be useful on wide devices and removing it altogether on narrow devices is not really practical – so the table has to be re-orientated.

Try this demo link. You can see how the table switches from a wide orientation to a ‘stacked’ orientation, with the original headings being repeated down the left hand side. Using alternating backgrounds, shows the division between each logical block.

Using this technique – tables using any number of vertical columns can also be logically represented on narrow devices.


Email HWB Design to discuss:
How we can help ensure your important table data is well represented on all devices.


Comments are closed.