如何以响应方式表示表格数据? [英] How can I represent tabular data responsively?

问题描述

我有一张需要展示的表格.在桌面上，它很简单:4 行 10 列.

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>

但是，在较小的屏幕上，我需要旋转 90%，给出 10 行和 4 列.

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.

我可以用 javascript 做到这一点，但非 javascript 用户会受到影响.(这是我应该关心的事情吗?)

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

我想我什至可以使用 css内容"属性来使用媒体查询注入表格，但这似乎是错误的，我什至不想考虑它.

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.

任何建议将不胜感激.理想情况下，我想要一个仅 HTML5/CSS 的解决方案.这样的东西真的存在吗，不用内容"，看起来就这么不对劲?

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?

推荐答案

最简单的方法可能是将表格放入 HTML 两次，一次为 4x10 格式，一次为 10x4 格式.然后你可以使用一个简单的媒体查询来根据设备的宽度来控制两个表中的哪一个是显示的，哪一个是隐藏的.

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.

这篇关于如何以响应方式表示表格数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！