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.
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.
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.
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.
Need to know how to enable it? Go here.