How do I reduce the use of horizontal scrollbars with tables?

I’m creating a website whose sole purpose is to show users large datasets in tables. Many of the tables have upwards of 20 columns, and I absolutely hate having horizontal scrollbars.

What are the best practices regarding the reduction of horizontal scrollbar use with large tables?

I’ve already implemented a toggle button that will switch between “essential” columns and all the columns when clicked. Even then, there’s a lot of horizontal scrolling.


Determine what data a user needs to see at any given time.

Generally, there’s data that isn’t relevant, or is only relevant in the context of other data.
Perhaps there’s a way you can split the data up like so (hard to know without any examples 🙁 ) to create different sections.

Some information is also able to be stacked ontop of eachother.
For example, an address is an easily recognisable format, and when placed underneath a name the relationship is obvious. By moving the data in your columns around based on relationships you can attempt to minimise the columns.

Sometimes there’s data that is important, but not important at a glance, so might be better displayed as a second line of data underneath the first row of data, that is made visible by selecting the row.

That said, an accurate answer to improve usability is hard to get without an example. Check as there’s a wealth of information regarding data formatting and display.

Source : Link , Question Author : MattSayar , Answer Author : djlumley

Leave a Comment