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.

emma.j
  • 113
  • 8
  • 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
  • You might want to take a look at Google's new maps implementation, although this will require some extra work. In short: you cannot scroll the table with a single finger and will instead scroll the page, a two finger drag will drop the table. Google shows this interaction by placing an overlay over the map when scrolling with a single finger indicating the need to use two fingers to scroll the map. – milo526 Aug 14 '17 at 21:22

2 Answers2

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.

Jonathan
  • 2,519
  • 2
  • 10
  • 14
  • 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 08:21
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

Raviteja Govindaraju
  • 101
  • 3