Table having columns and rows exceeding the size page [closed]

Question

I need to display data table which numbers of columns and rows could be quite changeable. I was thinking to have an horizontal scroll, but maybe this is not a good solution.
Each cell should be also editable.

The app will be in the web.
The code can be written in javascript, CSS, HTML

A possible solution could be something like this.

Any other idea, example how can I improve the display of these kind of data will be appreciate.

Answer 1

A button or icon on each column header to flip it between normal width and narrow. Narrow is still wide enough to show a glimpse of its content. Let the user choose which columns are to be fully visible and which to make skinny.

Answer 2

There are quite a few things you can do to fit your table more efficiently. These are the ones I consider when dealing with large tables:

• Use horizontal scrolling when the tables need to be bigger and there’s not enough space
• Turn horizontal space into vertical space (double lines)
• Have controls to show/hide columns
• Have compacted columns with less relevant information
• Use popout rows to reveal extra data
• Use icons when possible (ex: yes/no)
• Combine columns when possible

Hope it helps.

Answer 3

As Ryan pointed out, this is better suited to UXSE, but as long as it's here I'll offer my solution ...

If you expect the columns and rows to grow beyond the viewport, you'll have to make the headers on both axes "stick". In other words, treat them like frozen rows/columns in a spread sheet app.

The best solution is probably floating divs, though you could do some tricky nested scrolling too. There are plenty of tools to accomplish this between CSS and javascript.