Linearized Table

Problem

Wide tables do not fit seamlessly on small screens. If you try to design a table with a considerable number of columns you will end up with a horizontal scroll on the page.

Solution

Linearize the table by converting each table row to its own table with two columns: one for the headings, another for the cells.

Tables can be quite wide, which is a problem on small screens. You can scale them down until they fit the screen, but that makes the text unreadable; or you can display them at normal size, but that leads to horizontal scrolling. Both alternatives are far from being desired. To overcome this problem you can reformat tables to a more linear design, in which table rows become independent entities stacked on top of each other. In this new adapted design, table headings are removed and each table row is converted to its own simplified table with only two columns: one for the table headers and another for the corresponding cells. Like in a normal table, you should also use alternated colors (or any appropriate design) in each new section so they are clearly distinguished. The idea for this pattern was proposed by Chris Coyier1 on the article Responsive Data Tables.

This approach works particularly well when you have a simple table with bi-dimensional data. With more complex tables — those that have headers with two or more levels — it can be harder to clearly linearize all the information without compromising its clarity.

***

Web Design Patterns for Mobile Devices
Responsive design tables, 06/2012