46

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.

3
  • This sounds like a question of how to fix the table implementation which would make this a better fit for StackOverflow. Feb 22, 2013 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. Feb 22, 2013 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, 2015 at 22:26

8 Answers 8

32

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: [email protected]

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.

4
10

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.

2
  • Hi how did you put a fade-out on the right side? Was it a transparent ping?
    – Victor
    Feb 27, 2013 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 Feb 28, 2013 at 19:33
6

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.

1
  • +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, 2013 at 9:52
4

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/

0

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.

0

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..
1
  • 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 Jan 4, 2016 at 20:28
0

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.

0

I recently ran across this issue when building a style guide for my employer's API docs. My solution was to split each row into its own mini table and transform the data with a 90 degree counterclockwise rotation. Essentially, I treat each source table more like a database and the mobile view like like component views on the data, labeled by the table headings.

This is not a silver bullet for all tabular data, but it works well for the documentation pages I was building. I can see it not being a good solution for pure data tables (eg. many columns of numeric data).

Check out a Codepen implementation here. This solution was built on top of jQuery.

TL;DR the Codepen:

  1. Format your table nicely (table>thead>tr>td^^tbody>tr>td)
  2. Copy the function.
  3. In your js, execute the function, passing it the tables you want to go responsive. For example, you can pass all tables to the function like so:

tableMobilizer($("table"));

Your Answer

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

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