A few days ago, Roger Johansson posted his approach to creating responsive scrollable tables. As as is the case with most of what Roger publishes, I like the approach.
I thought I’d share something similar I used on a client project I did earlier this year; an (imperfect) approach that is practically the same as Roger’s, but slightly different in how I’m dealing with shadows as a visual clue about the “scrollability” of the table.
Roger creates a shadow along the rightmost edge of a container holding the table. This serves as a visual clue that the table can be horizontally scrolled. The shadow remains on the right side of the table at all times.
Thinking about requirements
While working on the client project, my thinking was along those same lines. I wanted any table, whether narrow or wide, to be supported, so I just wanted normal table markup, and content authors should not have to worry about doing anything special; just create a normal table. The CMS would automatically put every table into a container with overflow scrolling enabled, as Roger does.
This would be enough for practical purposes, although if I did this again, I would follow Roger’s advice and add some CSS to make the a scrollbar immediately visible in iOS Safari and Android browser (mine wasn’t).
Making shadows even more useful
What I wanted (which differs from Roger’s demo) was to have the visual clue of a shadow, but to also have the shadow indicate which direction contains hidden table content. This means that when you start out, all the content of the table is hidden to the right, so the rightmost side has a shadow indicating that. As you scroll, your table content scrolls to the left. When that disappears behind the leftmost side, a shadow should appear there as well. And finally, the shadow should disappear when you can’t scroll further on a given side.
See the demo to see exactly what I mean:
Plain HTML as a base
This is simply progressive enhancement. The table is simply a table. The only concession we’re doing here is putting the table into an extra container (I’m using a div). Then we turn on overflow scrolling.
...
.widetable {
overflow-x: auto;
}
Add scrollbars for certain browsers
I didn’t do this in my project, but you could use Roger’s code which improves the usability by making it even clearer that you can scroll.
Add the shadows
Lucky for me, I had seen Lea Verou do one of her usual fantastic talks, this particular one on multiple backgrounds and background-attachment. In fact, she described this very use case, only along a vertical axis rather than horizontal. Take a look at her post on the subject, it makes the strategy behind these shadows very clear. Thanks, Lea!
.widetable {
overflow-x: auto;
background-image: linear-gradient(left, #ffffff, rgba(255, 255, 255, 0)), linear-gradient(right, #ffffff, rgba(255, 255, 255, 0)), linear-gradient(left, #c3c3c5, rgba(195, 195, 197, 0)), linear-gradient(right, #c3c3c5, rgba(195, 195, 197, 0));
background-position: 0 0, 100% 0, 0 0, 100% 0;
background-repeat: no-repeat;
background-color: white;
background-size: 4em 100%, 4em 100%, 1em 100%, 1em 100%;
background-attachment: local, local, scroll, scroll;
}
Use vendor prefixes where necessary.
To break it down, remember that background-attachment: local fixes a background to the content, so it will scroll when the content scrolls. background-attachment: scroll, which is the default, means that the background will scroll with (in this case the containing) block within the viewport.
Now imagine the block that contains the table (we’re not touching the actual table at all). This container has four backgrounds: two on the left and two on the right. Two of these are the actual shadows. They are placed on either side of the container. The other two are gradients that are attached (via background-attachment: local) to each side of the content of the container, which is the table itself. These gradients serve to hide the shadows when they pass over them. See an example using colored gradients, which makes it easier to follow what is going on.
Many variations
There are many approaches to responsive tables. This worked for my project, but it depends on your tables. The method does have the advantage that it can be universally applied (to any table), and shadows and scrolling only appear when the table is too wide for the viewer’s screen. Some tables could or should be handled differently. Your mileage may vary. Also, nothing’s perfect. You might prefer to tweak the gradients. Great. I’m sure there are things that can be improved. At the base level, though, we’ve simply got a normal HTML table that scrolls within its container. Not too fancy, but it might beat scrolling the whole page horizontally or jumping through hoops to accommodate every table in your responsive site.
Great this work well ,
Thanks