i need to display reports with various fields, column wise. The length of each column could go along 50px appx. So , the overall report length would go upto 2k-3k px , since i need to display them in the column itself, the user has to scroll horizontally to see the end field. it looks awkward obvioulsy

So, question is , how to display such lengthy records? is their a standard for displaying such reports?

sample report

EDIT: I need to avoid scroll if possible. So any better technique?

  • 1
    I don't suppose there are few columns, are there? I solved this problem by flipping rows/columns on a report, since there were only 3 rows. Obviously doesn't apply with many rows, since you'll still have horizontal scrolling.
    – Zelda
    Commented May 5, 2012 at 11:20
  • no their could be 50 columns or more perhaps!
    – sree
    Commented May 5, 2012 at 15:06
  • How many rows would the report typically have?
    – Kris C
    Commented May 5, 2012 at 17:06
  • rows could be 30 appx...
    – sree
    Commented May 7, 2012 at 10:16
  • Somehow on the same lines (might get few insights) ux.stackexchange.com/questions/22441/…
    – Spicerjet
    Commented Jun 20, 2012 at 6:16

3 Answers 3


There's a trade-off here between:

  • showing all the data, but having to scroll
  • limiting the amount of data displayed and avoiding scrolling

The main thing to ask yourself is if your users can interpret 50 columns of data at once, or if there are different values within the set that different people will want to check on. It also depends whether the intention is to compare values within a row - e.g. Joe Doe makes lots of spelling mistakes, but is good on everything else, or to compare between rows e.g. Fred Bloggs is much better at spelling than the rest of the team.

A few approaches you could consider to tackle this tradeoff.

  1. Vertical scrolling - If there are typically only a few rows of data, transpose the report, so there are now a few columns (one per team member), but lots of rows. Vertical scrolling being more acceptable than horizontal scrolling
  2. Hide data. Can your users really interpret 50 columns of data at once? You could show a few important columns and have the rest hidden. Perhaps have expandable sections that users can use to show other columns, or drill down into subsections (even if they are a bit artificial
  3. Let the users choose. When running the report, let users select which columns they're interested in
  4. Customise for user role - perhaps the boss wants to check different metrics to a writer, to an editor, etc. Find out what each of your user types want and create smaller several reports to meet each of their needs
  5. Divide and conquer. Split the table into several smaller tables, trying to group related information together. This will make the information easier to digest.
  6. Single record view - show a single row as a more easily understood table of information, and then use paging to display each record in turn. If you need to compare between records, perhaps allow several records to be selected and shown in a tabular form next to each other.

I'm sure there are more, but that's hopefully food for thought

  • tnx for the answer could u elaborate on the last point plz?
    – sree
    Commented May 7, 2012 at 13:08
  • Rather than showing all 30 records, have a screen that only shows a single record. Essentially it presents only 1 record in a way that makes it easy to read. This might take the form of a table with a row for each field, e.g "spelling error" or "Text justification". Then provide a navigation to allow users to quickly move from record to record.
    – Kris C
    Commented May 7, 2012 at 15:39

Separate the data into two or three types. Like Dependent data or important data type. Use “Tabs” system to show the data in a table. This will avoid the horizontal scroll bars in a table or page.

User will get the required information in different tabs.

  • good idea but , In my report we cant segregate data , since all data fall into same category or type, any other suggestion plz..
    – sree
    Commented May 5, 2012 at 9:04
  • Try to use right and left arrows for moving around the table. Those arrows should be visible and it should give a meaning of movement of the table left to right and right to left. When mouse moving right side of the table right pointing arrow should appear. As well as left. For better user experience use jQuery for smooth movement of the table.
    – Omm
    Commented May 5, 2012 at 10:49
  • isnt that same as scrolling?
    – sree
    Commented May 7, 2012 at 13:04

You should have to use horizontal scroll bar in my opinion. User easily scrolls the scroll bar to view the other area. But the horizontal scroll bar should comes only the parent div. Then you can avoid the browsers scroll bar.

You don't want to apply scroll bar then go for split the tables

  • welcome to ux , nice try, but my intention is to avoid such horizontal scroll!!
    – sree
    Commented May 5, 2012 at 15:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.