A simple (and very rough) responsive table solution

There are a lot of very clever responsive table solutions available now.

There are solutions that flip the table on it’s side, convert it to a pie chart, gradually reduce the columns, allow users to determine columns, and even allow partial scrolling across the table. All of them are very clever.

However, there are concerns about many of them

  1. some of them would be hard to implement in the real world – especially those that rely on the ::before pseudo-element selectors to generate table headers)
  2. some of them may not work for all types of table data – like the pie chart solution
  3. some of them many confuse the end users – like the disappearing column solution.

Would you like to see a super-simple solution for responsive tables – that needs no JavaScript and just a few lines of CSS? Take a look:

Solution 1: super simple

All you need to do is add a wrapping div around the table.

<div class="table-container">

And then add some simple rules:

	width: 100%;
	overflow-y: auto;
	_overflow: auto;
	margin: 0 0 1em;

Here is demo 1

Solution 2: adding scrollbars for iOS

If you look at the demo above on an iOS device, like an iPhone, you will see that there are no scrollbars present. While users can swipe the table to scroll, this is not immediately obvious. We can fix that by adding some additional CSS.

	-webkit-appearance: none;
	width: 14px;
	height: 14px;

	border-radius: 8px;
	border: 3px solid #fff;
	background-color: rgba(0, 0, 0, .3);

Here is demo 2

Solution 3: scrollbars for everyone

If you want to force all browsers and devices to display scrollbars, there are a range of JQuery options available:

Solution 4: adding a gradient

Did you notice that the table looks “cut off” at the right edge? to give this a “fade in” look, you could add a linear-gradient. To do this successfully (so that it will work well at any screen size- or when the user scrolls) we will add two new elements to the markup.

<div class="table-container-outer">
	<div class="table-container-fade"></div>
		<div class="table-container">

And then some additional CSS

.table-container-outer { position: relative; }

	position: absolute;
	right: 0;
	width: 30px;
	height: 100%;
	background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
	background-image: -moz-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
	background-image: -ms-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
	background-image: -o-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
	background-image: linear-gradient(0deg, rgba(255,255,255,.5), #fff);

Here is demo 4

So there you have it, a few simple (and very rough) responsive table options. What do you think?

Date: 22 March 2013
Author: Russ Weakley
Category: CSS, News, Web
Tags: , ,

Comments so far

  1. Nice job on this!

  2. Matt Stow says:

    Be careful, as many mobile browsers don’t support overflow: auto, however, you can polyfill some with Overthrow: http://filamentgroup.github.com/Overthrow/

  3. Russ says:

    @Matt, a good point, and yet is it a great little polyfill. It also handles basic swipe and touch interaction.

  4. Great article.
    I had the basic code you’ve shown for the scrolling div above for a couple of weeks nad was ripping my hair out because it wasn’t working right: It made the table scroll, but it was creating a ‘ghost’ margin which still left the page scrolling.

    I then just randomly tried adding: “position: relative;” to the “.table-container” (i called it .scrolly-table, hehe) and it now works as intended.

    I love the webkit scrollbars code, thank you so much for that!

    great article.