javascript - 响应式设计 - 宽表

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

我的下意识反应是将表格放入可滚动的容器中。添加一些帮助 JavaScript 以通过鼠标拖动来移动内容对桌面用户很有帮助。移动用户将能够利用原生触摸拖动。

_HTML：

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

_CSS：

td {
    padding: 10px;
}

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

Answer 3

解决宽表问题的典型方法是在开始时仅显示基本列，并提供 UI 以交互方式添加其他列。