I'm in the process of redesigning my website to be responsive, and some of my account pages I show some detailed product information in a data table view.

What are some of the best methods to show a data table in mobile / tablet view?

I came across this link and I like the way he set this up, but I'm seeing if there are any other methods that are good which I'm not aware of.



Thank you!


Your question seems to be digging for implementation tips. I can't code your table, but I can speak to UX ... and isn't that why we're here?

Tables are tables

Unless you're talking about editable spreadsheets (which your question doesn't currently specify), there isn't a big difference in tabular data on GUI vs touch interface. Obviously a narrow screen can cause you pain with wide tables, but that can happen on a crowded desktop or small laptop screen too. For anything more than a few narrow columns, you should support some kind of horizontal scrolling.

The samples you referenced are quite simplistic. Most tables benefit from both a horizontal and vertical header column. They both need to be available for proper evaluation of a given cell. In those cases, just flipping the table doesn't provide any benefit. Keep both the header row and column in view and scroll/swipe the body of the table.

Just don't forget the controls. If you choose to allow row sorting, a simple desktop solution is control indication on hover. For touch (or both), remember to make the control persistently visible. Subtle, but oft forgotten.

  • Just wanted to add that if you choose to implement horizontal scrolling make sure to somehow colorcode the rows and/or keep the row labels fixed – aexl Feb 3 '15 at 9:06
  • That's what I meant by keeping both the header row and column in view. Color coding alone won't solve the problem. – plainclothes Feb 3 '15 at 16:15

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