I've built a responsive web application, and while its functional on mobile, it can be a bit clunky to use.

It has a page with a table of students, contact information, contact person, edit page and add payment icons, and email address. My next move is to remove everything but the name and edit buttons, as you can get the contact info by clicking on them, but I figured i'd ask here first.

1 Answer 1


Well, there's a couple of ways you could go.

  1. An obvious one, just leaving out some less important columns when scaling down
  2. Flip scroll. When scaling down, the headers at the top 'flip' to the left and allow the table to be scolled horizontally. Important note, the header labels stay in place.

It looks something like this:

Flip scroll

I've used this method before and it worked out great.

  1. A less favourite option, you can place all the data in multiple tables and stack them.
  2. Not really mentioned anywhere, but I've used this before. Placing a scrollable wrapper div around the table. Example
  3. ...

Reference: http://css-tricks.com/responsive-data-table-roundup/

  • 4 is what I'm doing right now but feels clunky. .tables responsive in bootstrap.
    – user57078
    Nov 18, 2014 at 12:13
  • @evandentremont I've added an example (for 4), quite close to how I'm using it in my code.
    – Vince C
    Nov 18, 2014 at 12:22

Your Answer

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