Question

我有一个数据表，需要在各种设备上显示低至320px宽的手机

我打算使用css媒体查询检测浏览器窗口大小，并在通过{display：block;低于某个级别后显示响应式版本并隐藏标准版本。

响应式版本只会将列堆叠在一起。

我的问题是，我应该将哪些html标签用于响应式版本。目前我只是使用一堆功能但看起来不正确的div。或许它是？

<div class="standard_version">
    <table>
        <tr>
            <th>Column A</th>
            <th>Column B</th>
            <th>Column C</th>
            <th>Column D</th>
        </tr>
        <tr>
            <td>4rq4</td>
            <td>vdg34</td>
            <td>xcb245</td>
            <td>12341234</td>
        </tr>
        <tr>
            <td>sdvxc4</td>
            <td>898fg</td>
            <td>sfasdf35</td>
            <td>451345</td>
        </tr>
        <tr>
            <td>asdfasf</td>
            <td>zxdfw</td>
            <td>1A2313</td>
            <td>9732</td>
        </tr>
    </table>
</div>


<div class="responsive_version">

    <div class="responsive_version_tr">
        <div class="responsive_version_th">Column A</div>
        <div class="responsive_version_th">Column B</div>
        <div class="responsive_version_th">Column C</div>
        <div class="responsive_version_th">Column D</div>
    </div>

    <div class="responsive_version_tr">
        <div class="responsive_version_td">4rq4</div>
        <div class="responsive_version_td">vdg34</div>
        <div class="responsive_version_td">xcb245</div>
        <div class="responsive_version_td">12341234</div>
    </div>

    <div class="responsive_version_tr">
        <div class="responsive_version_td">sdvxc4</div>
        <div class="responsive_version_td">898fg</div>
        <div class="responsive_version_td">sfasdf35</div>
        <div class="responsive_version_td">451345</div>
    </div>

    <div class="responsive_version_tr">
        <div class="responsive_version_td">asdfasf</div>
        <div class="responsive_version_td">zxdfw B</div>
        <div class="responsive_version_td">1A2313</div>
        <div class="responsive_version_td">9732</div>
    </div>

</div>

提前致谢！

Answer 1

我不会使用表格，因为它们难以响应地重新排列。我会使用<ul>标记而不是<tr>和<li>来代替<td>。此外，如果您想快速路线，只需使用twitter-bootstrap作为您的CSS基地。然后有一个单独的样式表（包含在bootstrap之后）来自定义它。但即使在引导表上，如果内容太大，它们也会在移动设备上获得滚动条。

我会按照我的描述使用标记替换，并使用div包裹在display: table;中并提供tr display: table-row;和li {{ 1}}然后在移动媒体查询中更改这些样式。如果使用bootstrap使它看起来不错，你可以给外部div一个display: table-cell;类。

Answer 2

是的，Divs会正常工作。但是，您是否考虑过使用预制的html / css网格模板（如Skeleton）甚至是完整的框架（如Bootstrap）？这些都是经过验证的，并且由于其庞大的用户群和支持，可能比您的兼容性更高。请参阅此堆栈交换程序员在"reinventing the wheel"

上发布的信息

用于表数据的响应式设计版本的HTML

2 个答案: