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

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