如何响应地表示表格数据？
我有一张桌子需要展示。在桌面上，它很简单:4行10列。
<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½</td><td>36½</td><td class='odd'>37½</td><td>39</td><td class='odd'>40½</td><td>42½</td><td class='odd'>44½</td><td>46½</td><td class='odd'>48½</td></tr>
<tr><td class='head'>Waist</td><td class='odd'>27½</td><td>28½</td><td class='odd'>29½</td><td>31</td><td class='odd'>32½</td><td>34</td><td class='odd'>36</td><td>38</td><td class='odd'>41½</td></tr>
<tr><td class='head'>Hips</td><td class='odd'>38½</td><td>39½</td><td class='odd'>40½</td><td>42</td><td class='odd'>43½</td><td>45½</td><td class='odd'>47½</td><td>49½</td><td class='odd'>52</td></tr>
</tbody>
</table>然而，在较小的屏幕上，我需要旋转这90%，给出10行和4列。
我可以在服务器端做到这一点，但你需要知道屏幕的大小，所以必须允许浏览器嗅探，这在很多季度都是不受欢迎的。
我可以用javascript做到这一点，但非javascript用户就会吃亏。(这是我应该关心的事情吗？)
大小图表将出现在电子商务网站上，让你对目标受众有一个了解。
如有任何建议，我们将不胜感激。理想情况下，我喜欢HTML5/CSS-only解决方案。这样的东西真的存在吗，不使用"content"，这似乎是错的？
回答 3
Stack Overflow用户
发布于 2013-02-01 08:06:16
最简单的方法可能是将表格放入HTML中两次，一次是4x10格式，另一次是10x4格式。然后，您可以使用简单的媒体查询来控制根据设备的宽度显示和隐藏这两个表中的哪一个。
Stack Overflow用户
发布于 2013-02-01 08:04:23
不幸的是，仅使用CSS/HTML5无法根据屏幕分辨率区分视图。
最好的解决方案是使用javascript检测窗口的大小，然后执行以下操作之一：
- 渲染两个表格(10x4和4x10)，并根据页面宽度更改其中一个可见。我会在页面主体上应用"wideBody“或"tallBody”这样的类，然后在宽的表格上应用"wideContent“这样的类，在高的表格上使用"tallContent”类。根据宽度有选择地将此类应用于页面正文-在CSS中执行以下操作：
.tallBody .wideContent，.wideBody .tallContent { display: none；}
- 转到对移动设备友好的不同页面(假设您针对的是移动用户)
Stack Overflow用户
发布于 2013-02-01 08:15:55
我强烈建议您看看Bootstrap，因为它听起来可能适合您的需求。基本概念是网格可以根据浏览器的窗口大小很好地调整大小，这也适用于移动设备。
Fluid Grid System
如今大多数浏览器和移动设备都支持JavaScript (除非用户决定禁用它)。与其重写和计算浏览器的宽度，不如使用一个工具，这样你就可以更多地关注应用程序本身的其他重要方面。
https://stackoverflow.com/questions/14637016
复制相似问题
腾讯云开发者
