6

Currently we have a table of results which has both a vertical and horizontal scroll due to the number of columns and rows displayed.

A user has requested we add the horizontal scroll at the top of the table as well as the bottom. This is not usual practise but I don't know the reasons why this is not a common approach to scrolling tables on web apps.

Is there an issue with adding scrollbars to the top of tables?

Improve this question
5
  • 1
    Why should there be scroll bar at the top?
    – Koen Lageveen
    Commented Aug 20, 2013 at 12:00
  • I'm not necessarily saying there should be, it's simply a request from a user that at the moment I am struggling to find a definitive reason to say no.
    – Paul Wallas
    Commented Aug 20, 2013 at 13:17
  • The point I'm trying to make is that there should be a definitive reason to say yes. One shouldn't duplicate functionality already covered by the platforms defaults just because a user thinks it's a good idea. You don't give any reasons in your questions.
    – Koen Lageveen
    Commented Aug 20, 2013 at 14:00
  • I'm with @KoenLageveen it sounds like the user (client?) is proposing a solution without defining what the problem is. Perhaps a scrollbar at the top is a good idea, but it depends on what the problem is that it is addressing. Had they said 'I want to be able to look at all the field headings without having to read all whole table first' That would be the problem whereby one possible solution is a top scrollbar, but identify the problem first and then come up with a solution for that issue, don't find a solution and see if there is a problem you can use it against.
    – JonW ♦
    Commented Aug 20, 2013 at 16:29
  • 1
    The reason for the top horizontal scroll is because with the table height being larger than the viewport, unless the user scrolls to the very bottom of the page they could not discover the horizontal scrollbar.
    – Paul Wallas
    Commented Aug 21, 2013 at 8:30

3 Answers 3

Reset to default
3

It's not common to have a scroll both at the top and at the bottom of the table because it would be redundant (not filling a purpose) in a correctly implemented table component.

The table component should show the data it contains in an area inside of itself, meaning that certain parts of the table (the column header, bottom scroll bar, possible action bar etc..) should be static and always present no matter if the user scrolls in the table (hence horizontal scroll will never be off-screen).

enter image description here enter image description here

Look at the example from Excel, the horizontal scroll is always present in the bottom right corner, no need add an additional scroll at the top of the table. Table components in web applications etc should follow the same pattern.

Improve this answer
2
  • Thanks for this, I understand completely. How does this theory apply to web app tables? Obviously we cannot always know the page height so capping the table to a fixed height in order to make controls static would be a difficult task.
    – Paul Wallas
    Commented Aug 20, 2013 at 13:22
  • @PaulWallas Hi Paul. Yes, I do recall the problem with setting the height of the table. If you set a fixed width I realize there will be a consistency issue with different monitor sizes (is there still no web implementation that handles problems such as these?). I would have a look around and see which ready table components are available and see if they are fairly easy to modify to suit the purpose. If you add a secondary scrollbar you can still have situations when none of them are showing in a long table. Allowing for static controls would definitely be the best way to go.
    – AndroidHustle
    Commented Aug 20, 2013 at 13:30
1

I think you should consider whether it makes sense to display all columns in the table for start. Why not offer the user the possibility to hide / show the columns he wants to see? Making it flexible to the user, the table would only present the horizontal scroll if needed. I think this is a good example: http://consulenza-web.com/jquery/MediaTable/

By the way, I think makes more sense the horizontal scroll at the end of the table

Improve this answer
0

Well you said it is large table. I don't know if height of table can fit on one screen but if it can't it is good idea to put h-scroll at the top of the table also.

When user tries to scroll horizontally to see values in columns of first few rows he has to scroll page up (maybe he has small screen), scroll horizontally for unknown step, and scroll page down to look at specific cell. Sometimes (for large number of columns) this process is repeated because user cannot distinguish what column is visible based on values in table cells.

User has few click & drag operations, instead h-scroll at top has only one.

It wouldn't make sense for smaller tables, tables that take less screen space, but with larger ones it does make sense.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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