user profile image

My execution of a responsive table solution. This particular solution flips the table rows into columns and allows you to scroll through the results while maintaining static headers.

Comments

  1. Nice work!

  2. Have you thought about adding white-space: no-wrap to your td's? When I added it to your code it eliminated the funky mis-alignment of table cells when the viewport is at mobile size.

  3. white-space: no-wrap is a dangerous default to have. The table cells should align themselves at the mobile size even when text wraps. This is dependent on Javascript so it requires the page be loaded at mobile size (not just sized down).

  4. Updated this code to handle screen resizing (think device orientation change) and to dynamically adjust the height of a flipped row if the screen size changes after the table has been flipped, causing text to wrap.

  5. James Francis @jamescecilfrancisiii on

    I needed this but with colspan headers. I would appreciate feedback on my code. Text wrapping at the bottom of the table was a problem, but easily fixed with a couple forced heights in CSS.

    http://codepen.io/jamescecilfrancisiii/pen/epgoPd

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...