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!


1 Answer 1


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 Commented Feb 3, 2015 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. Commented Feb 3, 2015 at 16:15

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