Таблицы и адаптивный дизайн - Joomla 3.x: Шаблоны, разметка и макеты вывода

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

На JED точно видел парочку. Посмотрите там поиском.

как вариант, контейнеру статьи прописать
не в курсе, правда, считается это решением для поисковиков, но в ulkit так оборачивают таблицы, во всяком случае

На JED точно видел парочку. Посмотрите там поиском.

Responsive Tables - Editor - нашел, с ним нельзя в таблицы картинки пихать, да и плагины не хотелось бы ставить...

Код

overflow: auto;

Надо будет попробовать, спасибо.
А как наоборот сделать, чтобы они сжимались под размер экрана?

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

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

Есть какие-нибудь решения на этот счет?

есть, и еще пачка, но мне первого пока хватало

Я обычно скриптом оборачиваю таблицы в div и этому диву даю overflow

Я обычно скриптом оборачиваю таблицы в div и этому диву даю overflow

Звучит не очень.

есть, и еще пачка

Спасибо.
Не знаете случайно как тестировать мобильную версию локально на компьютере?

Звучит не очень.Спасибо.

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

Не знаете случайно как тестировать мобильную версию локально на компьютере?

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

одна строчка на js, одна в CSS

Тогда может поподробнее об этих 2х строчках расскажете? Точнее о js. Хотя div-ом оборачивать... Вот, что звучит не очень.

Не знаете случайно как тестировать мобильную версию локально на компьютере?

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

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

Можно еще дописать скрипт

Спасибо.

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

Спасибо. Не знал.
Насобирал информацию. Позже буду проверять

Поковырялся в этой теме. Правильное решение такое, может кому пригодится:
✓ Нужен Bootstrap.
• Маленькие таблицы можно заменить div-ами, например:
• Большие таблицы оборачиваем вот в такой div:
Появятся скроллы.
• C версии Bootstrap 4, для определенных таблиц можно добавить класс .table-reflow, тогда вертикальные столбцы станут горизонтальными и наоборот. Сейчас содержимое этого класса надо бы найти еще...
У меня с половиной таблиц куча проблем при сжатии, поэтому придется вот каждую исправлять, подтачивая под один из этих трех способов, тяжко будет...

✓ Нужен Bootstrap.

вот даром бы его не надо ))) по сути вы применили решение для колоночной обертки, а не для самой таблицы

вот даром бы его не надо )))

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

Код

<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, но не сработало.

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

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

сделал так как вы написали ничего не вышло

сделал так как вы написали ничего не вышло

Странно, у меня сработало. Может дело в шаблоне? У меня протостар.
И да, из-за кэширования браузера я тоже не сразу увидел, что сработало.

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

Далее <div class='table-wrap'> тут таблица</div> все ли верно делал?

может я что то напартачил

может я что то напартачил

Проверьте еще раз.

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

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

Как-то так. Я далеко не профи (полный чайник), может кто-то из более подготовленных подскажет вам.

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


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

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

попробуйте так

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

Артём 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?