響應式設計 - 寬表

我正在做一個具有響應式設計的概念驗證。我修改的一個網頁有一些非常寬的表格。我真的不知道如何縮小表格寬度，所以在手機瀏覽器中沒有水平滾動條。響應式設計 - 寬表

我只是想知道是否有人使用響應式設計的極寬表的解決方案。哦，我想補充說，我不能隱藏表中的列。

在此先感謝

來源

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

響應式設計 - 寬表

回答

相關問題