Loading ..................

Responsive Table


Table collapses into a "list" on small screens. Headers are pulled from data attributes.


  1. rwd
  2. responsive
  3. table


  1. Very. Seriously, amazing and very useful! What's the browser compatibility on this?

  2. @AMKohn IE7 and 8 aren't too good but can probably be fixed with additional css.

  3. Neat solution. Populating the data-th attributes with Javascript could make this much nicer for large table sets and maybe even allow for fallbacks in older IEs.

  4. Nice work!

    I'm sure you knew this, but for others, if you wanted to get this working on a site/cms where you can't guarantee the data attributes get created (like if admin is creating the table via WYSIWYG), you could write some jQuery to generate them, like so:

    edit: Yeah, what @shshaw said. Didn't see your comment until I published mine. :)

  5. @shshaw @rtvenge Totally could be done using js!

    I was setting out for a pure css solution to implement in a clients Wordpress theme. The tables are built using Advanced Custom Fields so the data-attributes would be filled in automatically in php. I like avoiding js when it comes to displaying content as, potentially, there's already lots of js already running (modernizr, respond.js, the inevitable slider, a lightbox, etc).

  6. @geoffyuen I definitely appreciate you creating a non-js based solution. I don't take it lightly either. :)

    Kids: Don't use javascript if you don't have to. :)

    To lighten the weight of what I wrote, you could wrap the JS in a "if screen with is under X" too.

  7. Add the data attributes dynamically

      var th = document.getElementsByTagName('th');
    var td = document.getElementsByTagName('td');
    for (var i = 0; i < td.length; i++) {
      td[i].setAttribute('data-th', th[i % th.length].textContent);
  8. I love the way this works. Do you have some suggestions for getting this to work in Safari? I am currently using Safari 5.1.1

  9. Very cool table, very flexible and easy to adjust. It worked great for the table on a responsive site I'm prototyping - I put a { text-align:center;} on the .rwd-table to center it on a modal pop-up.

  10. Really nice solution! Thanks for sharing

Leave a Comment Markdown supported. Double-click names to add to comment.

You must be logged in to comment.
  • 479 Hearts