响应式设计 - 宽表

我正在做一个具有响应式设计的概念验证。我修改的一个网页有一些非常宽的表格。我真的不知道如何缩小表格宽度，所以在手机浏览器中没有水平滚动条。响应式设计 - 宽表

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

在此先感谢

来源

2013-02-22 Victor

这看起来像[ux.se]的问题。找到需要克服技术挑战的帮助，但是SO Q/A不是要求设计提示的地方 – 2013-02-22 18:25:17

也许换位或垂直切割它可能会起作用？ – 2013-02-22 18:27:15

根据表格的内容，您可能只需将其放在水平方向拖动表格即可，而无需向左或向右滚动整个页面。 – zzzzBov 2013-02-22 18:30:10

来做到这一点是完全格式化表格中的最好的方式：

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标记内。

来源

2013-02-22 18:27:22 cimmanon

+1 - 很好的使用'attr（）' – 2013-02-22 18:30:48

+1我需要学习使用'attr（）'，完美的CSS – 2013-02-22 18:31:08

谢谢！ – Victor 2013-02-22 20:45:27

解决宽表问题的一种典型方法是在开头仅显示重要列，并提供一个UI以交互方式添加其他列。

来源

2013-02-22 18:31:10

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; 
}

来源

2013-02-22 18:39:58 zzzzBov

+1 - IMO在许多情况下是最好的解决方案，特别是在触摸设备上。向用户轻松/直观地滑动到左侧。 – 2013-02-22 18:52:48

响应式设计 - 宽表

回答

相关问题