1

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

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. – evandentremont Nov 18 '14 at 12:13
  • @evandentremont I've added an example (for 4), quite close to how I'm using it in my code. – Vince Caregnato Nov 18 '14 at 12:22

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.