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

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

Таблицы и адаптивный дизайн

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

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

Сообщений: 108



« : 17.08.2016, 10:30:44 »

Здравствуйте,
Такая проблема: на сайте куча огромных таблиц, из-за них сайт никогда не станет адаптивным, а поисковики ведь требуют адаптивность. Например, таблица 10 столбцов, 20 строк. При фикс. ширине всё как положено, но если шаблон не фиксируется, то таблицы режутся, например, до 5 столбцов. Есть какие-нибудь решения на этот счет?
Спасибо.
Записан
Olg
Живу я здесь
******

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

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


« Ответ #1 : 17.08.2016, 11:03:44 »

На JED точно видел парочку. Посмотрите там поиском.
Записан
effrit
Группа развития
*****

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

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


effrit.com


« Ответ #2 : 17.08.2016, 11:09:49 »

как вариант, контейнеру статьи прописать
Код:
overflow: auto;
не в курсе, правда, считается это решением для поисковиков, но в ulkit так оборачивают таблицы, во всяком случае
Записан
creative3d
Осваиваюсь на форуме
***

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

Сообщений: 108



« Ответ #3 : 17.08.2016, 11:35:59 »

На JED точно видел парочку. Посмотрите там поиском.
Responsive Tables - Editor - нашел, с ним нельзя в таблицы картинки пихать, да и плагины не хотелось бы ставить...
Код:
overflow: auto;
Надо будет попробовать, спасибо.
А как наоборот сделать, чтобы они сжимались под размер экрана?
Записан
effrit
Группа развития
*****

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

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


effrit.com


« Ответ #4 : 17.08.2016, 11:51:43 »

чтобы все красиво жалось под размер, надо тучу времени убить и стандартизировать таблицы.
а если много столбцов, то вообще никак, либо все в кашу превратится, либо придется часть ячеек скрывать и это тоже нетривиально, так что проще просто прокуртку делать для блока статьи.
ну или гугли, выбирай понравившееся решение и под него затачивай каждую таблицу.
Записан
effrit
Группа развития
*****

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

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


effrit.com


« Ответ #5 : 17.08.2016, 11:59:34 »

ну т.е. по умолчанию лучше всем таблицам прописать в CSS
Код:
table{width: 98%;}
и не задавать фиксированную ширину для ячеек, чтобы на планшетах не было скрола, а на мобильниках пусть уже листают
Записан
fsv
Практически профи
*******

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

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


« Ответ #6 : 18.08.2016, 00:08:18 »

Есть какие-нибудь решения на этот счет?
есть, и еще пачка, но мне первого пока хватало
Записан
neogeek
Давно я тут
****

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

Сообщений: 212


« Ответ #7 : 18.08.2016, 06:28:19 »

Я обычно скриптом оборачиваю таблицы в div и этому диву даю overflow
Записан
creative3d
Осваиваюсь на форуме
***

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

Сообщений: 108



« Ответ #8 : 18.08.2016, 08:05:29 »

Я обычно скриптом оборачиваю таблицы в div и этому диву даю overflow
Звучит не очень.
есть, и еще пачка
Спасибо.
Не знаете случайно как тестировать мобильную версию локально на компьютере?
Записан
neogeek
Давно я тут
****

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

Сообщений: 212


« Ответ #9 : 18.08.2016, 08:14:40 »

Звучит не очень.Спасибо.
одна строчка на js, одна в CSS и работает на все 100% без всяких дополнительных модулей и плагинов

Не знаете случайно как тестировать мобильную версию локально на компьютере?
сужайте окно браузера, используйте эмуляторы, ну а лучше реальных девайсов конечно нет ничего
Записан
creative3d
Осваиваюсь на форуме
***

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

Сообщений: 108



« Ответ #10 : 18.08.2016, 08:27:11 »

одна строчка на js, одна в CSS
Тогда может поподробнее об этих 2х строчках расскажете? Точнее о js. Хотя div-ом оборачивать... Вот, что звучит не очень.
« Последнее редактирование: 18.08.2016, 08:51:32 от creative3d » Записан
AlekVolsk
Профи
********

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

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



« Ответ #11 : 18.08.2016, 10:59:02 »

Не знаете случайно как тестировать мобильную версию локально на компьютере?
в браузерах сейчас имеется волшебная комбинация ctrl+shift+m, в лиcе доступна сразу. в Chrome доступна при включенном инспекторе кода ctrl+shift+i
Записан
neogeek
Давно я тут
****

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

Сообщений: 212


« Ответ #12 : 18.08.2016, 11:04:35 »

Код:
<script type= "text/javascript">
$(document).ready(function () {
  $("table").wrap("<div class='table-wrap'></div>");/*-- Обертываем таблицы дивом --*/
});
</script>
<style type="text/css">
.table-wrap{
  overflow:auto;
}
</style>
Записан
neogeek
Давно я тут
****

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

Сообщений: 212


« Ответ #13 : 18.08.2016, 11:07:40 »

Можно еще дописать скрипт при необходимости, чтобы срабатывал к примеру при определенном разрешении экрана.
Записан
creative3d
Осваиваюсь на форуме
***

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

Сообщений: 108



« Ответ #14 : 18.08.2016, 13:45:08 »

Можно еще дописать скрипт
Спасибо.
в браузерах сейчас имеется волшебная комбинация
Спасибо. Не знал.
Насобирал информацию. Позже буду проверять Azn
Записан
creative3d
Осваиваюсь на форуме
***

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

Сообщений: 108



« Ответ #15 : 28.08.2016, 20:32:00 »

Поковырялся в этой теме. Правильное решение такое, может кому пригодится:
✓ Нужен Bootstrap.
• Маленькие таблицы можно заменить div-ами, например:
Код
<div class="row">
<div class="col-xs-6">
     <p>Column 1</p>
   </div>
<div class="col-xs-6">
     <p>Column 2</p>
   </div>
</div>
• Большие таблицы оборачиваем вот в такой div:
Код
<div class="table-responsive"></div>
Появятся скроллы.
• C версии Bootstrap 4, для определенных таблиц можно добавить класс .table-reflow, тогда вертикальные столбцы станут горизонтальными и наоборот. Сейчас содержимое этого класса надо бы найти еще...
У меня с половиной таблиц куча проблем при сжатии, поэтому придется вот каждую исправлять, подтачивая под один из этих трех способов, тяжко будет... Sad
Записан
AlekVolsk
Профи
********

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

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



« Ответ #16 : 28.08.2016, 21:42:20 »

✓ Нужен Bootstrap.
вот даром бы его не надо ))) по сути вы применили решение для колоночной обертки, а не для самой таблицы
Записан
creative3d
Осваиваюсь на форуме
***

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

Сообщений: 108



« Ответ #17 : 29.08.2016, 07:21:38 »

вот даром бы его не надо )))
Ну не знаю. Текущая Joomla его использует, Joomla 4 будет использовать Bootstrap 4, мой шаблон его поддерживает. Что еще надо?
Записан
vitzer
Осваиваюсь на форуме
***

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

Сообщений: 115


« Ответ #18 : 12.10.2016, 23:58:46 »

Код:
<script type= "text/javascript">
$(document).ready(function () {
  $("table").wrap("<div class='table-wrap'></div>");/*-- Обертываем таблицы дивом --*/
});
</script>
<style type="text/css">
.table-wrap{
  overflow:auto;
}
</style>
А куда конкретно надо вставить этот код? Пытался в index.php, но не сработало.
Записан
vitzer
Осваиваюсь на форуме
***

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

Сообщений: 115


« Ответ #19 : 13.10.2016, 01:28:16 »

В общем, допетрил.
Код:
$(document).ready(function () {
  $("table").wrap("<div class='table-wrap'></div>");/*-- Обертываем таблицы дивом --*/
});
вставил в template.js, а
код:
.table-wrap{
  overflow: auto;
}
в template.css.
Теперь все работает, а страницы с таблицами соответствуют требованиям адаптивности для мобильных устройств.

Записан
Артём 2014
Завсегдатай
*****

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

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



« Ответ #20 : 19.10.2016, 22:32:11 »

В общем, допетрил.
Код:
$(document).ready(function () {
  $("table").wrap("<div class='table-wrap'></div>");/*-- Обертываем таблицы дивом --*/
});
вставил в template.js, а
код:
.table-wrap{
  overflow: auto;
}
в template.css.
Теперь все работает, а страницы с таблицами соответствуют требованиям адаптивности для мобильных устройств.


сделал так как вы написали ничего не вышло
Записан
vitzer
Осваиваюсь на форуме
***

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

Сообщений: 115


« Ответ #21 : 19.10.2016, 23:04:09 »

сделал так как вы написали ничего не вышло
Странно, у меня сработало. Может дело в шаблоне? У меня протостар.
И да, из-за кэширования браузера я тоже не сразу увидел, что сработало.
Записан
Артём 2014
Завсегдатай
*****

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

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



« Ответ #22 : 19.10.2016, 23:36:03 »

смотрите в папке template.css. мы в конце вставляем код .table-wrap{
  overflow: auto;

Далее <div class='table-wrap'> тут таблица</div> все ли верно делал?
Записан
Артём 2014
Завсегдатай
*****

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

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



« Ответ #23 : 19.10.2016, 23:36:13 »

может я что то напартачил
Записан
vitzer
Осваиваюсь на форуме
***

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

Сообщений: 115


« Ответ #24 : 20.10.2016, 00:39:05 »

может я что то напартачил
Проверьте еще раз.

В template.js вставил код:
$(document).ready(function () {
  $("table").wrap("<div class='table-wrap'></div>");/*-- Обертываем таблицы дивом --*/
});
После кода внизу остались 2 строки (вдруг вы со скобками что-то напутали):
})
})(jQuery);

Далее вставил в template.css код:
.table-wrap{
  overflow: auto;
}

Как-то так. Я далеко не профи (полный чайник), может кто-то из более подготовленных подскажет вам.
« Последнее редактирование: 20.10.2016, 00:43:58 от vitzer » Записан
neogeek
Давно я тут
****

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

Сообщений: 212


« Ответ #25 : 20.10.2016, 08:31:14 »

Артём 2014
да можно и без js скрипта, в ручную таблицы оборачивать и в CSS добавить:

Код:
.table-wrap{
  overflow:auto;
}

если не срабатывает, то возможно у вас перебиваются стили, надо смотреть ваш CSS

если с js, то в ручную не нужно оборачивать

попробуйте так
Код:
<script type= "text/javascript">
jQuery.noConflict();
jQuery(document).ready(function () {
  jQuery("table").wrap("<div class='table-wrap'></div>");/*-- Обертываем таблицы дивом --*/
});
</script>
<style type="text/css">
.table-wrap{
  overflow:auto!important;
}
</style>
Записан
darkghost
Практически профи
*******

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

Сообщений: 1811



« Ответ #26 : 20.10.2016, 12:14:52 »

только хотел предложить версию о конфликте --- но опередили --- jQuery.noConflict();
Попробуйте, как вариант, этот вариант скрипта разместить в хидер-е шаблона
Записан
Артём 2014
Завсегдатай
*****

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

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



« Ответ #27 : 23.10.2016, 17:18:37 »

Артём 2014
да можно и без js скрипта, в ручную таблицы оборачивать и в CSS добавить:

Код:
.table-wrap{
  overflow:auto;
}

если не срабатывает, то возможно у вас перебиваются стили, надо смотреть ваш CSS

если с js, то в ручную не нужно оборачивать

попробуйте так
Код:
<script type= "text/javascript">
jQuery.noConflict();
jQuery(document).ready(function () {
  jQuery("table").wrap("<div class='table-wrap'></div>");/*-- Обертываем таблицы дивом --*/
});
</script>
<style type="text/css">
.table-wrap{
  overflow:auto!important;
}
</style>
Спасибо за ответ, это вставлять  template.css?
Записан
Страниц: [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