How to handle wide spreadsheets on mobile devices

Question

A bit of a general question. It’s just interesting if smart people can display wide tables (many columns) on mobile devices.

To explain a little, we create mobile sites that download their content using ajax from the main site, and in some cases tables with a large number of columns are stored on these pages. The only way to place the entire table on a mobile device held vertically is to reduce the font size until it becomes legible.

I just wondered if there was another option.

Thanks.

Answer 1

If you are willing to take risks, the jQuery Mobile beta (in case this issue is related to it) has a new susceptible impelementation table:

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

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

Basically, if the width of the screen should be narrow, it will resize to adjust the width change. You can use it so that some predefined columns hide if the width is small. This is currently the best flexible table solution on the jQuery Mobile platform.

Answer 2

Instead of using tables to display your data, you can use "widgets" for each row. This simplifies design for mobile devices and makes data flow responsive.

Example: Examdoctor - Buy Page

Answer 3

I encountered this problem before ... And this is a pain because you do not have enough space to display all the data.

How I worked, this time used lists of folding elements. You create a list that contains only the most important data of each row, and if the user wants to know more about this row, he can click on the row and unlock it, showing all the data.

Only my 2 cents ...

Answer 4

A spotty similar method at that time ago and bookmarks for future use, but did not find the need to do anything like that, so I did not play, but it was a neat idea:

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