0

我有一张需要展示的表格。在桌面上，它很简单：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“内容”属性使用媒体查询来注入表，但这似乎太错误了，我什至不想考虑它。

sizechart 将出现在电子商务网站上，让您了解目标受众。

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

4

3 回答 3

3

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

于 2013-02-01T00:06:15.837 回答
0

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

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

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

    .tallBody .wideContent, .wideBody .tallContent { 显示：无；}

  2. 转发到移动友好的不同页面（假设您的目标是移动用户）

于 2013-02-01T00:04:23.470 回答
0

我强烈建议您看一下 Bootstrap，因为听起来这个框架可能适合您的需要。基本概念是网格会根据浏览器的窗口大小很好地调整大小，这也适用于移动设备。

流体网格系统

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

于 2013-02-01T00:15:55.050 回答