响应式设计范围的表格

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

解决宽表问题的典型方法是在开始时只显示重要的列，并提供一个UI来交互地添加其他列。