Suggestions for a page with a variable amount of large tables

Question

I'm building a reporting application. Reports are configured dynamically, and can contain any number of tables that are placed spaced vertically, where tables can be very large both in width and height. We're considering several options on how to display the reports.

1. Full size tables. The page has one vertical and one horizontal scrollbar. This can lead to a very tall page where there is lots of vertical scrolling. One issue is that the table header may not always visible when viewing the bottom of a large table. A solution could be to 'freeze' table headers, using JS to keep always keep them on top of the table part you're viewing. Another option would be to repeat the table headers in the table.

2. Limited size tables. Here we limit the vertical size of the table to a certain maximum. The table width remains full size, and the page still has one horizontal scrollbar. When the table is taller than the maximum size, then I see two options. Either we add a vertical scrollbar to the table, or we add paging to it. The vertical scrollbar has as a disadvantage that the page already has a scrollbar since the number of tables can be larger.

I'd really appreciate your feedback on the pros and cons of either solution or maybe you know of another solution.

Answer 1

Not knowing a ton about what data is in these tables. I would suggest that you only show one table at a time, take the entire view port for the height and width and then use a simple navigation to select the table itself (instead of just stacking them all vertically).

Maybe use a side navigation or (what I like) use a top "pilled" navigation that can scroll horizontally if there is too many to show in the view... an example of this would be the tabbed "pill" navigation from bootstrap - http://getbootstrap.com/components/#nav-pills