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);
    }
    
    
  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">
          <tr>
            <th>Movie Title</th>
            <th>Genre</th>
            <th>Year</th>
            <th>Gross</th>
          </tr>
          <tr>
            <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>
          </tr>
          <tr>
            <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>
          </tr>
          <tr>
            <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>
          </tr>
        </table>
    
    

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

You must be logged in to comment.
  • 180319 Views
  • 14 Comments
  • 516 Hearts
Loading...
Loading...