User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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 '13 at 21:51
4  
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 '13 at 22:25
    
this is definitely UX, i.e. what to do with wide data as the view port gets narrower, in order to main peak usefulness and consumability for the user – Toni Leigh Feb 8 '15 at 22:26
up vote 27 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
13  
Here's an example of Option 1: css-tricks.com/examples/ResponsiveTables/responsive.php – thgaskell Feb 23 '13 at 0:32
2  
great example above comment – Victor Feb 23 '13 at 1:00
3  
Very cool, thank you for sharing the CSS-tricks link! – Skuirrel Aug 22 '13 at 19:27

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 '13 at 18:31
1  
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 '13 at 19:33

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
    
+1 for how would I display this data on a small screen if I wasn't using a table? ... Think different when you're up to RWD! – Mahdi Sep 29 '13 at 9:52

you can also use Footable jQuery. I have used it on several projects and it works fine. Here's its link: http://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/

share|improve this answer

You can also consider using something like The Columns Project It enables mobile-friendly formatting/styling of HTML tables instantly, but it require you to upload a CSV file though.

share|improve this answer

One strategy I've used is to hide and show table content using media queries. I even have a custom "mobile optimized" column that I can show and hide (yes it's not amazing for performance but it's easy to do!)

Example of how I would use my "mobile optimized" column:

Let's say you have a list of clothing items:

Here's how the table might look

product name  | color | size | shipping notes
awesome shirt | white | xl   | us-only)

you can condensing some of them into a single column sentence view that wraps nicely e.g.

Here's how your "hidden" mobile only sentence looks:

**Awesome Shirt** - Shirt comes in white, xl. Only ships to US.

You can use media queries to show/hide this column

Benefits of using this method:

  • Actually takes up less space then using DLs
  • You don't need any javascript or server side mobile detection
  • Really I've found I typically need to tailor the content slightly for mobile anyhow...
  • Pretty fast to implement

Drawbacks:

  • Sending more html
  • You're repeating yourself..
share|improve this answer
    
oops didn't notice that Dominik Oslizlo's solution is actually similar to mine in terms of hiding the normal columns...leaving this here though incase it helps clarify – Sabrina Gelbart Jan 4 at 20:28

There are multiple ways to tackle this.

  1. Columns Selector and Column wrapping technique

In this technique, the users have options to decide which columns to see. Also it is responsive bu converting columns to child rows based on width/resolution of screen.

Column Reduction and Column Selector Technique Demo

  1. Overflow Control

In this technique, the columns that have lengthy data can be configured to show a subset of the information. Additional information can be shown when the user voluntarily clicks on the ellipsis.

Overflow Control Demo

  1. Grid Approach

This is similar to the lists that you see in shopping sites, but in a one dimension vertical array. In this case all the info is spread in a grid format.

Finally, JQuery DataTable API Is one of the most reliable, flexible, configurable tables around and allows you to try out all of the above and more layouts.

Hope this helps.

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.