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