How should large table columns be handled on a responsive design?

  • Related to This Question, I'm interested in what I should do with a responsive design theme where the users have control over the columns which are displayed in a tabular, data rich page. Users are able to manipulate which columns are displayed, so I can't just limit the data to a few columns, as the other question's answers suggest. A potential work-around is to have a custom "mobile" query set up with pre-defined columns which I design for, but I can't control whether the users use this view or not.

    Right now, I just have each column in each row stacking on top of each other and centered. I think this is not a very good design, as it wastes space and doesn't look organized. How should I best tackle this problem?

    I have a redmine server here that exemplifies my problem, and here are some screenshots:

    Desktop:

    enter image description here

    Mobile View:

    enter image description here

    I'd suggest turning tabular data into "cards" with a title (subject, #) and details within the card, rather than trying to keep a column structure.

    I guess not being able to see multiple records at a time will defeat the purpose because the comparative aspect would then be lost. That way, a table is a must and a record at a time will not help -- am I on the same page?

    +1 for @BenBrocka 's suggestion. Collapsing tables into "display views" follows one of the main principles of responsive design: ALL your content is important (mobile clients don't want "less content"). See css-tricks.com/responsive-data-tables/ for a sample.

  • Good question! As always when it comes to small screen experiences you will have to focus on the core functionality. Ask yourself which columns could be removed and still present a meningful table and let the user select the additional columns that he is interested in.

    This solution might help you: A Responsive Design Approach for Complex, Multicolumn Data Tables.

    It essentially recommends what has already been said: use only essential columns...

    tables on responsive design

    ...and give the user the option to decide which columns to show.

    tables on responsive design

    The good thing about the article is they throw in some code.

    UPDATE: CSS-Tricks has published a Responsive Data Table Roundup article.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM