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

  11. @geoffyuen I am having a hard time trying to center the table. I placed the code with a container. probably a newbie question.

  12. @msycpu You should be able to center it by setting your left and right margins to auto.

  13. @geoffyuen Thanks that works. That was actually a simple answer, should have read the code more carefully?
    One more question: is there a way to line of the data-th="genre" if there are two rows of data. For example, I separated the genre of Star Wars to Adventure
    Sci-Fi. When in mobile or Responsive format the Sci-fi is aligned all the way to the left.

        <h1>RWD List to Table</h1>
        <table class="rwd-table">
            <th>Movie Title</th>
            <td data-th="Movie Title">Star Wars</td>
            **<td data-th="Genre">Adventure<br />Sci-fi</td>**
            <td data-th="Year">1977</td>
            <td data-th="Gross">$460,935,665</td>
            <td data-th="Movie Title">Howard The Duck</td>
            <td data-th="Genre">"Comedy"</td>
            <td data-th="Year">1986</td>
            <td data-th="Gross">$16,295,774</td>
            <td data-th="Movie Title">American Graffiti</td>
            **<td data-th="Genre">Comedy<br />Drama</td>**
            <td data-th="Year">1973</td>
            <td data-th="Gross">$115,000,000</td>
  14. Hey, Geoff.

    This is great, thank you.

    Have you noticed that in Chrome, when you resize the viewport smaller and then back to the original size, the TH's don't align to the corresponding TD's in the rows below. Doesn't appear to be an issue in Firefox or Safari.

    Any solution?

  15. @ohthatjonathan Hey, that's weird. It used to work as intended. It could be a new Chrome bug? It still works in Firefox too. Hmmm.

  16. @ohthatjonathan @geoffyuen It now works correctly in the latest version 45.0.2454.101 m :D

  17. You can avoid using "magic number" for 1st column width in mobile view by using a bit different set of 'display' values: http://codepen.io/SelenIT/pen/epBOMP

  18. This is just what I needed, thank you!

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

You must be logged in to comment.
  • 632 Hearts