Форум Сайтостроение Веб-строительство

Адаптивность, бутстрап и таблицы 10Х10

VoV@
На сайте с 22.09.2007
Offline
196
VoV@
811

Уважаемые коллеги.

На страницах сайта есть довольно большие таблицы 10Х10 и т.п. Заголовки у них и в первой строке и в левой колонке. Как с ними поступить при адаптации страниц для мелких экранов до 320Х480px?

Пока мне на ум приходит только прятать таблицу и показывать её во всплывающей панели по кнопке/ссылке. Это хотя бы не рвёт верстку при первоначальной загрузке страницы. Но это всё равно заставляет прокручивать и по горизонтали и по вертикали, когда таблица открыта.

Кто что может посоветовать?

⭐ Разработка Андроид-приложений (Xamarin C#). ⭐ Разработка ASP.NET (WebForms, MVC, WebAPI, Core). ⭐ Цой жив!
totamon
На сайте с 12.05.2007
Offline
437
totamon
#1
VoV@:
Но это всё равно заставляет прокручивать и по горизонтали и по вертикали, когда таблица открыта.

ну а куда деваться?) вот несколько решений для таблиц http://habrahabr.ru/post/149742/

тоже предстоит редизайн сайта, там таблицы и по 20 колонок, голову заранее ломаю(

Домены и хостинг https://8fn.ru/regru | Дедик от 3000р https://8fn.ru/73 | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget
dkameleon
На сайте с 09.12.2005
Offline
386
dkameleon
#2

я их позаворачивал в блоки с оферфлоу авто.

на узких экранах просто появлется элегантный скролинг по горизонтали.

Дизайн интерьера (http://balabukha.com/)
pragmatik
На сайте с 19.03.2013
Offline
102
pragmatik
#3
dkameleon:
я их позаворачивал в блоки с оферфлоу авто.
на узких экранах просто появлется элегантный скролинг по горизонтали.

Оу, а можно ссыль на рабочий пример? Очень интересно потестить, а то у самого в закладках лежит статья на которую totamon сослался выше, но приведенные в ней решения как-то не особо возбуждают.

G
На сайте с 22.09.2007
Offline
161
gruz_
#4
pragmatik:
Оу, а можно ссыль на рабочий пример? Очень интересно потестить, а то у самого в закладках лежит статья на которую totamon сослался выше, но приведенные в ней решения как-то не особо возбуждают.

вот тут в самом начале пример с overflow-x:auto : 10+ Solutions for Responsive Data Tables - http://exisweb.net/responsive-table-plugins-and-patterns

totamon:
тоже предстоит редизайн сайта, там таблицы и по 20 колонок, голову заранее ломаю(

может стоит тогда перейти на дивы, там вариантов адаптивных побольше будет

totamon
На сайте с 12.05.2007
Offline
437
totamon
#5
gruz_:
может стоит тогда перейти на дивы, там вариантов адаптивных побольше будет

не, я наверно тоже на сдвиге таблицы остановлюсь, если строки в колонку выводить теряется наглядность сравнения данных.

Joker-jar
На сайте с 26.08.2010
Offline
154
Joker-jar
#6

Накидал небольшой пример: https://jsfiddle.net/sueek0fe/

G
На сайте с 22.09.2007
Offline
161
gruz_
#7
Joker-jar:
Накидал небольшой пример: https://jsfiddle.net/sueek0fe/

угу и ещё можно спрятать сам скроллбар, свайпы работают (пару вариантов тут: https://toster.ru/q/18012)

Joker-jar
На сайте с 26.08.2010
Offline
154
Joker-jar
#8
gruz_:
угу и ещё можно спрятать сам скроллбар, свайпы работают (пару вариантов тут: https://toster.ru/q/18012)

Можно и так, лишь бы наглядность не страдала.

VoV@
На сайте с 22.09.2007
Offline
196
VoV@
#9
dkameleon:
я их позаворачивал в блоки с оферфлоу авто.
на узких экранах просто появлется элегантный скролинг по горизонтали.

В бутстрапе тоже так же делается, таблица заворачивается в <div class="table-responsive"></div>

Есть так же вариант, который применяет jquery mobile, там колонки выстраиваются в 1 столбец. Но вставлять всю эту библиотеку ради одних только таблиц - не фонтан.

---------- Добавлено 22.05.2015 в 12:06 ----------

gruz_:
угу и ещё можно спрятать сам скроллбар, свайпы работают (пару вариантов тут: https://toster.ru/q/18012)

Если скроллбары прятать, пользователи не всегда понимают что содержимое прокручивать можно. Лучше, наверное, их как-то стилизовать посимпатичнее.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий