2

One of the pages in our web app has a long table of paginated results. The user can set the number of results per page which means the page can be very long (e.g. 200 rows). There is only one vertical scrollbar on the page that affects the whole page rather than just the table.

enter image description here

There are also many columns to the table so we need a way to "scroll" horizontally. The problem is that the page is so long that the user would need to scroll down to the bottom of the page to see the horizontal scrollbar, which in some cases means scrolling through 200 results

The options I see are:

  1. Put a sticky horizontal scrollbar at the bottom of the screen, so that it is always on view at the bottom of the screen no matter how far you scroll up and down - I worry that this might give a false indication that the table does not go below the fold
  2. Put a sticky horizontal scrollbar at the top of the table so it is always on view - I have never seen this done before!
  3. Use something else to allow the user to "scroll" and see the columns which are not on screen (such as a right arrow in the final column) - I am not sure this is a widely understood way to scroll in a table?
  • 1
    have you considered eliminating the browser window scroll bar, and provide scrollbar for the table only? The only tricky bit would be to ensure that the table's container's height would need to adjust dynamically depending on the size of the browser window. The most robust plugin for having fixed header and first first column is mkoryak.github.io/floatThead – Jung Lee Oct 17 '15 at 0:27
1

You can Fixed the height of table area. Table header and end of table Scrollbar visible all the time. The table data scrolls based on records in Horizontal/Vertical manner.

Example of Fixed header table in CSS. No JavaScript used. http://codepen.io/chiranjeeb/pen/LGsiv

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.