3

I have a web app with a bunch of wide tables that represent spreadsheet-like data.

It works well on regular computer monitors but doesn't scale well on phones and smaller screens.

Is there a method for optimally displaying very wide tables on small screens without the need for the user to do a lot of horizontal scrolling?

TheOne
  • 10,819
  • 20
  • 81
  • 119
  • This a very broad question, and the approach should depend on the type of data, amount of columns, expected type of use, etc. Quite often, you should instead consider providing tools for accessing selected data or getting summaries of data in a logical table in different ways, rather than try to render all of the table in a small viewport. – Jukka K. Korpela Sep 10 '14 at 14:30
  • The question says that the table is wide... – TheOne Sep 11 '14 at 10:30

1 Answers1

3

You can use responsive design to get the desired result.

A while back i answered a question on responsive tables. Link to the Question

It all depends on how big you table is and how you want to present it. You can avoid part of horizontal scrolling by hiding unnecessary data (if there is any). If you have to present the same amout of data you have to with with vertical scrolling.

Example Fiddle

If you have qiute a lot of horizontal rows now it results in a big vertical scrolling page. In that case hide data and show as user request on cells.

Community
  • 1
  • 1
Sudheer
  • 2,955
  • 2
  • 21
  • 35