Отзывчивый дизайн - широкие таблицы

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

Типичным способом решения проблемы с широким столом является представление только основных столбцов в начале и предоставление пользовательского интерфейса для добавления дополнительных столбцов в интерактивном режиме.

Answer 3

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