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 4×10 format and once in 10×4 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.