Making complex tables look good and usable on a mobile device is something I’ve struggled with before and the solutions I came up with were less than optimum. That is until I ran into this article and my world has changed. It is written by Joe Winter where he explains how he fit a wide complex table into a narrow mobile window. It is Genius!
This article illustrates the way to fit is in a narrow mobile screen is to have a dropdown with a selection of all the columns. Then below that is 2 columns with the main labels in the left table and the main values column to the right of it. Because there is enough space in a mobile screen for 2 columns to display perfectly it can look great. Now you can use the dropdown menu above to select each of the other columns and it will swap out the right column with the selected one.
You can also click on the main label column and it will display column titles in the left column and values in the right one, displaying all the data for each main item row.
This is the best way I’ve seen it being handled ever. Its perfect.
Check out the original Designing a complex table for mobile consumption article from Joe Winter for more details on this.