StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POResponsive tables, the smart way
text
Body
copied!<p>I've got a table that contains data. Tabular data. And it looks like this.</p> <p><img src="https://i.stack.imgur.com/Ho7IW.png" alt="enter image description here"></p> <p>See <a href="http://jsfiddle.net/MrLister/c54RN/" rel="nofollow noreferrer">this fiddle</a>.</p> <p>Now what I'd like is, when it's displayed on a narrower screen, for the table to look like this, so that you don't get a horizontal scroll bar and it keeps the same visual structure:</p> <p><img src="https://i.stack.imgur.com/tkHUd.png" alt="enter image description here"></p> <p>(or if you want, like <a href="http://jsfiddle.net/MrLister/c54RN/2/" rel="nofollow noreferrer">this fiddle</a>.)</p> <p>Now my question is, how do you do that? I'd prefer a CSS only way, but so far, I haven't managed to do that in only CSS. (The second fiddle contains <code>rowspan</code> attributes, which don't have CSS equivalents.)</p> <p>The HTML <em>is</em> generated server side, so I could generate one of the two layouts depending on the window width, but then it wouldn't respond to a window resize.</p> <p>I'm not against a little Javascript, but in this case, to translate the first table into the second on a window resize, it would need to be taken apart and rebuilt, cell by cell, and I think that's overkill. Still looking for a media query that can do all the work.</p> <p>Experimenting a bit, I came <a href="http://jsfiddle.net/MrLister/c54RN/2/" rel="nofollow noreferrer">this close</a>, but that doesn't work in IE8 and IE9.</p> <p>So, does anybody have any ideas how to tackle this? The ideal solution would work on table cells of varying height (2 lines of text or more) and any number of columns.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload