CodePen

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

Responsive Table

Description

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

Tags

  1. rwd
  2. responsive
  3. table

Comments

  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: http://codepen.io/rtvenge/pen/JIDdv

    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);
    }
    
    

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

You must be logged in to comment.
  • 73960 Views
  • 8 Comments
  • 327 Hearts
Loading...
Loading...