响应式设计 - 宽表

Question

我正在进行响应式设计的概念验证。我正在修改的一个网页有一些非常宽的表格。我真的不知道如何缩小表格宽度，因此移动浏览器中没有水平滚动条。

我只是想知道是否有人使用响应式设计的极宽表的解决方案。哦，我想补充一点，我无法隐藏表中的列。

提前致谢

Answer 1

最好的方法是完全重新格式化表格：

http://jsfiddle.net/MLZEb/9/

tbody, tr, th, td { display: block }
thead { display: none }
td:before {
    content: attr(data-label);
    display: inline-block;
    width: 6em;
    padding-right: 1em;
    vertical-align: middle;
}

td:first-child {
    background: #CCC;
}

每个td都需要data-label属性才能有效运作：<td data-label="Favorite Color">Blue</td>。作为列标题的典型th元素应在thead标记内。

Answer 2

My knee-jerk reaction would be to put the table in a scrollable container。添加一些辅助JavaScript以通过鼠标拖动来移动内容对桌面用户很有帮助。移动用户可以利用原生触摸拖动。

<子> HTML：

<div class="container">
    <table>
        ...
    </table>
</div>

<子> CSS：

td {
    padding: 10px;
}

.container {
    width: 100%;
    overflow: auto;
}

Answer 3

解决宽表问题的一种典型方法是在开头只显示基本列，并提供用于交互式添加其他列的UI。