Cures to Horizontal Scrolling Tables

The pink frame is a 1200px-wide viewport. Source: Author.

Ever had to turn an Excel sheet into a data table within an application?

Here are come two key approaches to help you avoid the dreaded horizontal scroll. 

Elegant ways

Grouped, hidden and turned into two rows. Source: Author.

1. Get rid of some data

   • Show it elsewhere (e.g. on a detail page)

   • Show it on drill-down or hover in place

   • Group by the properties that repeat and move that data into the header

2. Change the layout

   • Fat rows

   • Transpose

When the table has to stay wide

Usually, fat rows should fix the problem. If the scroll needs to stay you are probably dealing with the worst case, which is that the table is totally custom and could be even 100 columns x 100 rows.

Horizontal Scroll in Table - Cure #2, designed by author.

1. My favourite: Vertical scroll button-ish bars (presented above). Please make sure the table rows overlap (in this example, the next scrolling view starts with “Payment Method”)

2. Allow to change order of columns and select / unselect them columns easily

3. Offer different layouts (2 or 3)

   • Standard (regular with horizontal scroll)

   • Condensed view (decreased paddings, shortened texts)

   • Fullscreen (just the table goes full screen in a new tab)

4. Last resort: Horizontal scroll glued to the bottom of the viewport

Good luck!