Handling data heavy tables in responsive designs

[baldidiot]

How do you lot deal with data heavy tables in responsive designs? I have a few sites that I was never planning on making responsive or mobile as they have a lot of data and so it wouldn't really work very well, but with the impending mobile update threatening to show its head I figured I should maybe bite the bullet and do it anyway, just to be on the safe side.

So lets say you have a table with 10 columns, but only 2 or 3 would fit on a mobile page. Would you:

1. Use a scrolling table, so at least the data is still there.

2. Hide the least important columns as the page size shrinks.

3. Something else I haven't thought of.

[baldidiot]

Also, would option #2 count as 'hiding text', which the big G has always said is a bit iffy. Or does google realise you're doing it because of the smaller screen and therefore let you off?

[-Shay-]

I'd probably be inclined to use a simple table and then the option to "expand".

[wonderpunter]

Responsive tables still don't work.. best just to scroll *I always tell mobile users if they need to scroll, I have found this still keeps the experience good for mobi users, I have tried responsive tables and didnt like it one bit

[slotplayer]

Also, would option #2 count as 'hiding text', which the big G has always said is a bit iffy. Or does google realise you're doing it because of the smaller screen and therefore let you off?

I've wondered the same thing sort of. I think G means hiding content by setting an element suchas a div or nav menu to a negative x,y position so it appears off screen and using display: hidden vs. display: none. display:none removes the element from the document flow whereas display:hidden simple toggles its visibility.

But I could be wrong as I've never found any supporting info to backup my interpretation.

I haven't see the table but one way would be to make 5 two column tables and display them vertically when on a mobile device and display them horizontally when on a desktop. You can use css to remove double borders.

[nwalker]

Personally I'd let them scroll. I've tried responsive tables but they only work if you are not displaying too much data or can easily flip the axis round so the display still makes sense.

It also depends on how much mobile traffic you are expecting or have as that may make you think about other solutions for displaying the data other than in tabular form.

[baldidiot]

Ok cool, cheers for the input.

[TheGooner]

3. Something else I haven't thought of.

Google's suggestion is to turn the columns into long streams of data cascading down the page.
Source : https://developers.google.com/web/fu...sponsive?hl=en
(They ARE full of sh!t)

If you do find an idea that works let me know ... like you I have tons of data that's not going anywhere near mobile until I can work out how to do it!

[baldidiot]

Google's suggestion is to turn the columns into long streams of data cascading down the page.
Source : https://developers.google.com/web/fu...sponsive?hl=en
(They ARE full of sh!t)

If you do find an idea that works let me know ... like you I have tons of data that's not going anywhere near mobile until I can work out how to do it!

Yeah that just doesn't make sense from a data comparison point of view, especially if you're including the ability to sort based on column headings.

Looks like the best solution for that kind of table is a scrolling table - at least that's fairly easy to implement with only minor code changes...

[oddsguy]

There are a few things you can do:

- Hide columns on smaller screen sizes using media queries
- Allow the table to scroll horizontally, Bootstrap handles this quite nicely
- Cascade the data (mentioned previously) but looks untidy in my opinion
- If possible restructure the data in the table so it can appear vertically (not always an option I know)

I have a lot of odds comparison tables on my website, I tend to let them scroll horizontally and it seems to work ok - might not look the best but they're functional.

Good luck!