Форум русской поддержки Joomla!® CMS
10.12.2016, 09:06:04 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Резиновая таблица в мобильной версии сайта

 (Прочитано 3961 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Teng
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 85



« : 15.05.2015, 10:10:07 »

Здравствуйте. очень нужна помощь — подсказка.
Как сделать (настроить) "резиновую" таблицу в материале Joomla, что бы нормально отображалась на смартфоне?
У меня на сайте http://www.kuzet-gpa.kz/tseny они какие то то "деревянные" получаются  Sad
Мне надо, что бы можно было масштабировать, проматывать вправо-влево, в общем видеть всю информацию.
Как, например здесь  http://www.kuzet-gpa.kz/images/price/price-list.pdf — это файл PDF для скачивания, вот он нормально отображается. Таблица загружается под размер смартфона и без проблем увеличивается и проматывается вправо.

Спасибо.

Записан
darkghost
Практически профи
*******

Репутация: +75/-0
Offline Offline

Сообщений: 1811



« Ответ #1 : 15.05.2015, 13:30:13 »

так на странице одна из таблиц имеет фиксированную ширину
Код:
ОХРАННО — ТРЕВОЖНАЯ СИГНАЛИЗАЦИЯ ДЛЯ КВАРТИР
<table border="1" style="width: 800px; border-color: #614720;">
Какая может быть резина то?
Если хотите править и смотреть сайт на моб.устройствах --- открываете один из представленных сайтов, вводите адрес, открываете FireBug и прям тут смотрите правила, стили и правите их
Записан
Alldar
Тестеры
*****

Репутация: +181/-1
Offline Offline

Пол: Мужской
Сообщений: 1475



« Ответ #2 : 15.05.2015, 13:39:31 »

Оберните в div допустим с классом .my_div эту таблицу и добавьте стили


Код
@media screen and (max-width: 800px) {
.my_div {
   max-width:100%;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
}
}

это позволит прокручивать таблицу по ширине не распирая сам контейнер
Записан
Teng
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 85



« Ответ #3 : 15.05.2015, 15:24:41 »

так на странице одна из таблиц имеет фиксированную ширину
Код:
ОХРАННО — ТРЕВОЖНАЯ СИГНАЛИЗАЦИЯ ДЛЯ КВАРТИР
<table border="1" style="width: 800px; border-color: #614720;">
Какая может быть резина то?
Если хотите править и смотреть сайт на моб.устройствах --- открываете один из представленных сайтов, вводите адрес, открываете FireBug и прям тут смотрите правила, стили и правите их

Спасибо за ссылки. Я знаю, что все таблицы, кроме первой, фиксированные. Я только с первой экспериментировал ))
Записан
Teng
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 85



« Ответ #4 : 15.05.2015, 15:40:29 »

Оберните в div допустим с классом .my_div эту таблицу и добавьте стили


Код
@media screen and (max-width: 800px) {
.my_div {
   max-width:100%;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
}
}

это позволит прокручивать таблицу по ширине не распирая сам контейнер

Спасибо, я понял, что будет работать.
Еще бы понять куда это все вставлять, прикручивать и оборачивать )))
CSS еще понимаю немного, с дивами проблема.
Записан
darkghost
Практически профи
*******

Репутация: +75/-0
Offline Offline

Сообщений: 1811



« Ответ #5 : 15.05.2015, 15:53:45 »

Цитировать
Оберните в div допустим с классом .my_div эту таблицу и добавьте стили
В самом материале, открываете -хтмл- (на панели) и таблицу помещаете в такой блок
Код:
<div class="my_div">
<table border="1"
...
</table>
</div>
Открываете файл CSS шаблона (это может быть как тесплате.цсс, лайот.цсс - зависит от самого шаблона, его конструкции) и в самом низу дописываете правила отображения класса
Код:
@media screen and (max-width: 800px) {
.my_div {
   max-width:100%;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
}

Записан
Teng
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 85



« Ответ #6 : 17.05.2015, 18:13:30 »

В самом материале, открываете -хтмл- (на панели) и таблицу помещаете в такой блок
Код:
<div class="my_div">
<table border="1"
...
</table>
</div>
Открываете файл CSS шаблона (это может быть как тесплате.цсс, лайот.цсс - зависит от самого шаблона, его конструкции) и в самом низу дописываете правила отображения класса
Код:
@media screen and (max-width: 800px) {
.my_div {
    max-width:100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}



Огромное спасибо! Завтра сделаю.
Записан
Andrey6789965
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 2


« Ответ #7 : 01.03.2016, 20:52:50 »

Здравствуйте, у меня при этом способе таблица обрезается. Точнее обрезается то, что раньше выходило за пределы сайта.
Записан
Andrey6789965
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 2


« Ответ #8 : 01.03.2016, 21:02:32 »

Все, разобрался. Надо фиксированную ширину в свойствах таблицы убирать, тогда она сжимается.
Записан
myblogpc.kom
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 1


« Ответ #9 : 01.04.2016, 09:47:16 »

Как вариант можно таблицу закачать в Google диск, взять код таблицы и разместить на сайте с шириной, например, 100%. Подробнее об этом написано здесь: http://infodio.ru/tablica-dlya-sajta.html
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6461



« Ответ #10 : 01.04.2016, 10:04:55 »

Как вариант можно таблицу закачать в Google диск, взять код таблицы и разместить на сайте с шириной, например, 100%. Подробнее об этом написано здесь: http://infodio.ru/tablica-dlya-sajta.html
сори, но это называется - методом через заднее место )
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet