Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 6 down vote favorite
1

I am doing a proof of concept with responsive design. One web page that I am modifying has some extremely wide tables. I really don't know how to shrink the tables width so there is no horizontal scroll bar in a mobile browser.

I was just wondering if anyone had the same issue with wide tables and what they did to overcome a horizontal scroll bar in a mobile browser using responsive design. Oh and I wanted to add that I can not hide columns in the table.

share|improve this question
This sounds like a question of how to fix the table implementation which would make this a better fit for StackOverflow. – MCeley Feb 22 at 21:51
I disagree, MCeley. I ran into this with a client not long ago and I can't think of how i would display tabular data (taking the implementation fully out of, I couldn't really figure out how it should look). Long tables are really nasty. – Bryan Robinson Feb 22 at 22:25

3 Answers

up vote 7 down vote accepted

You have two ways out of this situation:

Option 1: Group the data, so that instead of presenting data for row 1 in 10 columns, you actually use 1 column with the data printed out in paragraphs, e.g.:

John Doe

Name: John

Surname: Doe

Email: johndoe@johndoe.com

Phone no.: 1234567890

This data usually would be split in 5 columns on bigger screens.

Option 2 is to leave tables as they are and make them only swipe-scrollable horizontally.

share|improve this answer
1  
Here's an example of Option 1: css-tricks.com/examples/ResponsiveTables/responsive.php – thgaskell Feb 23 at 0:32
great example above comment – Victor Feb 23 at 1:00
up vote 3 down vote

One potential solution is to embrace the horizontal scroll. In my comment above, I mentioned dealing with this. What we did (and it may be a cop out) was to put a slight fade-out on the right side to give a greater sense of draggability or scrollability to the right.

It was not the greatest solution, but it is a solution. I'm curious to see other responses, but this is a reasonable fall back.

share|improve this answer
Hi how did you put a fade-out on the right side? Was it a transparent ping? – Victor Feb 27 at 18:31
Our dev went for transparent PNGs and absolutely positioned divs. There may be better ways to accomplish this, but that was the quick and dirty way – Bryan Robinson Feb 28 at 19:33
up vote 1 down vote

Something has to give with large tables and small screens. When I have this challenge, many times I have to not load the table to load the data in a different way. A list of each record in a Label: Value format happens often.

However, in your case where the table is wide so each record has a number of attributes, you may find yourself needing special pages that show the details of each record or produce something similar to an accordion control.

Long story short - try to approach the data as "how would I display this data on a small screen if I wasn't using a table". RWD has a lot of challenges but no where does it say you have to keep every element on the page in the same markup.

Final bit - you may want to consider dynamically loading the data. This way you can apply the template for the data that fits the screen you're viewing it in via a more adaptive approach.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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