10

I have a mobile site that contains multiple tables of data. These tables are relatively long, but have a height restriction, meaning that when a user scrolls over the table on a mobile, it scrolls the table instead of the page.

Can anyone suggest a better way to deal with this, so that it is easy to scroll up and down the page and equally as easy to scroll through the tables?

Thanks in advance.

  • 1
    To clarify, you have several tables on one page? Could you display them on separate pages instead? They'd still be long but that would mitigate the problems associated with scrolling several individual tables inside a scrolling page. – Matt Obee Aug 14 '17 at 14:01
  • Agreeing with Matt, nested scrolling on mobile should be avoided if possible. – Alan Aug 14 '17 at 14:15
  • Yes, we have several tables on one screen. This page is like our dashboard homepage, so ideally we wouldn't want to separate it into different pages. – emma.j Aug 14 '17 at 14:15
  • I agree... Its not ideal. I'm just trying to work out whatr other options there are other than separating into different pages. A drop down could work.. – emma.j Aug 14 '17 at 14:16
  • How about tap them for a modal pop-up, which is kinda shy of the logical conclusion, a separate page that Matt suggested? If you have long tables you need to scroll through for a dashboard, that sounds like cross-purposes. Can you display the top 10? – Nick T Aug 14 '17 at 18:53
2

I don't have a larger context of your design but presenting you few options that might help:

Option 1:

Show upto few rows for each table without any scroll and have a +SEE ALL button. Clicking that would reveal the full table with a -SEE LESS button. Full table will not have a scroll within the table but just goes with the page scroll.

enter image description here


Option 2: Just show the table headings. On click, show the table in a popup / full screen with a close / back button. The table can have a fixed height and scrollable content.


enter image description here

  • 1
    I was thinking something like your option 2, but with expand-in-place rather than a pop-up, and always keeping (at least) the current table's header visible so you can collapse it again. – TripeHound Aug 15 '17 at 8:24
  • Cool, that also sounds good. – Raviteja Govindaraju Aug 16 '17 at 8:52
  • This is great - thank you! I think I will go for option 2 :) – emma.j Aug 21 '17 at 8:35
7

Make sure that the table doesn't fill up the entire vertical space of the screen so that a user can drag a spot below the table to keep scrolling down the page. If you do this, here are some excellent guidelines to make it obvious that the table is scrollable.

Alternatively, can you use tabs to separate the tables? Without knowing more about your dashboard/application, I can't say if this is reasonable, but it's worth considering.

Finally, here's a helpful article about using tables in responsive design. It presents some options for displaying large tables.

  • Although you probably want/need the full width for the table, having a left- or right-hand "border" that wasn't part of the table, and could be used to scroll the page may also work. – TripeHound Aug 15 '17 at 8:21

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.