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.

Answer 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.