I want to display a table with 20 columns in a web-page with big headings on each column. I don't want to use scrolling for tables.
Is there any better way to display them or any approach would be appreciated.
3
-
4Really need far more information about what you are trying to achieve and the people who will use this application.– DarrylGoddenJul 4, 2019 at 12:42
-
This application is a servicing portal and will not be used on mobile devices. Lots of customer data has to be displayed in table format.– jaideep natarajanJul 5, 2019 at 5:55
-
If you can provide more information about your use case then we might be able to provide you with a better solution than a table with 20 columns. What is it you are trying to achieve? Who are your users? What is the data you are working with?– David SaundersJul 9, 2019 at 9:51
Add a comment
|
2 Answers
If you want to display twenty columns without any scrolling, then, assuming that ALL your users are:
- on a desktop,
- all of them are using large screens
- with 1920+ resolution and
- none of them are using CTRL + to make the screen larger
then you would have approximately 1500 pixels in which to display the table. (That's assuming a side navigation.) Personally I think you will have a lot of trouble getting past 1200 pixels for your table. Users will find the data to be too small and will use CTRL + to zoom in and would then have to scroll anyway.
Let's continue with this thought experiment
1500 pixels divided by 20 is 75 pixels (with zero white space - big mistake)
A date in the format of 07/04/2019 at 12px takes 65 pixels (not including white space).
A product ID number (1905213010315010) such as I use at work takes 114px without any padding.
A title such as Minimum Qualifying Purchase at 12px needs three lines. You would need to bring it down to 8px to fit the title in two lines. (Not a good idea)
It seems very unlikely that you can have a 20 column table without any scrolling.
There are multiple solutions.
One is to show the more important columns at first glance. Then, allow users to drill down into organized sections (product data, customer info, etc...) and then finally offer the users a full version that requires scrolling from the outset.
In short, unless you have a lot of boolean responses in this table then you will have to come up with creative solution.
As already mentioned, it'll be hard to show 20 columns on a single monitor. Simply not enough space until you get into the realm of 4K monitors, where there would instead be too much data on a single line to easily parse.
There are solutions, such as using a mobile table view as shown in this CodePen snippet.
or simply rethinking what is truly important. This post has a few very neat ideas, specifically the Horizontal Scrolling and QuickView shown.
The key point is going to be that you will have to hide some data until the user specifically requests to see it. If that is not possible, a basic table isn't the right format for your data.
