How to handle wide tables on mobile devices

Question

Bit of a general question here. Just wondering if there is a clever of displaying wide tables (IE. lots of columns) on mobile devices.

Just to explain a bit, we create mobile sites that load their content using ajax from the main site, and in some instances these pages container tables that have a lot of columns. The only way to fit the whole table onto a mobile device held vertically, is to shrink the font size down till it's unreadable.

Just wondered if there was another option out there.

Thanks.

Solution 1

If you are willing to risk it, beta verion of jQuery Mobile (in case this question is related to it) has a new responsive table impelementation:

http://jquerymobile.com/demos/1.3.0-beta.1/docs/tables/index.html

And here's an example: http://jquerymobile.com/demos/1.3.0-beta.1/docs/tables/table-reflow.html

Basically if screen width is to narrow it will change its size to adjust to width change. You can use it in such way that some predefined columns will hide if width is to small. Currently this is the best solution for responsive tables on jQuery Mobile framework.

Solution 2

Instead of using tables to display your data, you could use a "widgets" for each row. This makes it a lot easier to design for mobile and make the data flow in a responsive way.

Example: Examdoctor - Buy Now page

Solution 3

I have faced this problem before... And it's a pain since you don't have enough space for displaying the entire data.

The way i worked it out that time was using lists of collapsible items. You create a list which contains only the most important data of each row, and, if the user wants to know more about that line, he can click the row and uncollapse it, showing all the detais.

Just my 2 cents...

Solution 4

Spotted this kind of technique a while back and bookmarked it for future use but never found the need to do anything like it so I've not played around but it's a neat idea:

http://css-tricks.com/responsive-data-tables/

View more solutions

Comments

[Strontium_99]

That's pretty damn cool. I'm going to have a play with that. Nice one.

[Strontium_99]

Good suggestion. But I think for my particular setup I might have to try the beta jquery mobile option. Thanks for your comments.

[Strontium_99]

This seems to be very similar to the jquery mobile option jquerymobile.com/demos/1.3.0-beta.1/docs/tables/…. Nice one. Thanks.

[Strontium_99]

Good suggestion. Unfortunately for my setup I don't think this will work. But I have got an idea where else I could use something like this. Thanks for the pointer.

[mattytommo]

@97ldave +1 I built that example ;)

[ScarletMerlin]

Love it, *** jquerymobile. This one is better.