Question

我有一张桌子需要显示。在桌面上，它很简单：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&#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列。

我可以在服务器端执行此操作，但是您需要知道屏幕大小，因此必须允许浏览器嗅探，这在很多方面都是不受欢迎的。

我可以用javascript做到这一点，但是非JavaScript用户会受到影响。（这件事应该与我有关吗？）

我想我甚至可以使用css“content”属性来使用媒体查询来注入表格，但这似乎是错误的，我甚至不想考虑它。

尺寸表将出现在电子商务网站上，以便让您了解目标受众。

任何建议将不胜感激。理想情况下，我想要一个HTML5 / CSS专用解决方案。这样的事情是否存在，而不使用“内容”，这似乎是错误的？

Answer 1

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

Answer 2

不幸的是，不能仅使用CSS / HTML5来区分基于屏幕分辨率的视图。

最好的解决方案是使用javascript来检测窗口的大小，然后执行以下操作之一：

渲染两个表（10x4和4x10）并根据页面宽度更改哪一个表可见。我会在页面的主体上应用类似“wideBody”或“tallBody”的类，然后在桌子上有一个类似“wideContent”的类，这个类很宽，而“tallContent”就高在桌面上。根据宽度选择性地将此类应用于页面主体 - 在CSS中执行此操作：

.tallBody .wideContent，。wideBody .tallContent {display：none; }
转发到适合移动设备的其他网页（假设您定位的是移动用户）

Answer 3

我强烈建议您查看Bootstrap，因为听起来这个框架可能符合您的需要。基本概念是网格根据您的浏览器窗口大小调整大小，以适应移动设备。

Fluid Grid System

现在大多数浏览器和移动设备都支持JavaScript（除非用户决定禁用它）。不必重新编写和计算浏览器宽度，也可以使用工具，这样您就可以更专注于应用程序本身的其他重要方面。

如何响应地表示表格数据？

3 个答案: