How can I represent tabular data responsively?

Question

I have a table which I need to display. On a desktop, it is simple: 4 rows and 10 columns.

<table width='100%'>
<thead>
<tr><th colspan='10'>Size Chart (inches)</th></tr>
<tr><th>Size</th><th>6</th><th>8</th><th>10</th><th>12</th><th>14</th><th>16</th><th>18</th><th>20</th><th>22</th></tr>
</thead>
<tbody>
<tr><td class='head'>Bust</td><td class='odd'>35&#xbd;</td><td>36&#xbd;</td><td class='odd'>37&#xbd;</td><td>39</td><td class='odd'>40&#xbd;</td><td>42&#xbd;</td><td class='odd'>44&#xbd;</td><td>46&#xbd;</td><td class='odd'>48&#xbd;</td></tr>
<tr><td class='head'>Waist</td><td class='odd'>27&#xbd;</td><td>28&#xbd;</td><td class='odd'>29&#xbd;</td><td>31</td><td class='odd'>32&#xbd;</td><td>34</td><td class='odd'>36</td><td>38</td><td class='odd'>41&#xbd;</td></tr>
<tr><td class='head'>Hips</td><td class='odd'>38&#xbd;</td><td>39&#xbd;</td><td class='odd'>40&#xbd;</td><td>42</td><td class='odd'>43&#xbd;</td><td>45&#xbd;</td><td class='odd'>47&#xbd;</td><td>49&#xbd;</td><td class='odd'>52</td></tr>
</tbody>
</table>

However, on a smaller screen, I would need to pivot this 90%, giving 10 rows and 4 columns.

I could do this on the server side, but then you would need to know the screensize, so would have to allow on browser sniffing, which is frowned upon in a lot of quarters.

I could do this with javascript, but then non-javascript users would suffer. (Is this something that should concern me?)

I suppose I could even use the css "content" property to inject the table using media queries, but that just seems so wrong I don't want to even contemplate it.

The sizechart is due to appear on an ecommerce site, to give you an idea of the target audience.

Any suggestions would be appreciated. Ideally I would like an HTML5/CSS-only solution. Does such a thing exist, without using "content", which just seems so wrong?

Answer 1

The simplest thing would probably be to put the table in your HTML twice, once in 4x10 format and once in 10x4 format. Then you can use a simple media query to control which of the two tables is displayed and which is hidden based on the width of the device.

Answer 2

I would highly recommend taking a look at Bootstrap since it sounds like this framework might fit what you need. The basic concept is the grid resizes nicely according to your browser's window size which accommodates mobile devices as well.

Fluid Grid System

Most browsers and mobile devices these days supports JavaScript (unless the user decides to disable it). Instead of having to re-write and figure out the browser width, might as well use a tool so you can focus more on the other important aspects of the app itself.

Answer 3

Unfortunately differentiating the view based on the screen resolution using only CSS/HTML5 is not possible.

The best solution is to use javascript to detect the size of the window and then doing one of the following:

1. Render both tables (10x4, and 4x10) and changing which one is visible depending on the width of the page. I would apply a class like "wideBody" or "tallBody" on the body of the page and then having a class like "wideContent" on the table that is wide and "tallContent" on the table that is tall. Selectively apply this class to the body of the page depending on the width - and in CSS do this:

   .tallBody .wideContent, .wideBody .tallContent { display: none; }

2. Forward to a different page that is mobile friendly (assuming you are targeting mobile users)