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

0 Пользователей и 1 Гость просматривают эту тему.
  • 27 Ответов
  • 1344 Просмотров
*

creative3d

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

*

Olg

  • Живу я здесь
  • ******
  • 1045
  • 73
Re: Таблицы и адаптивный дизайн
« Ответ #1 : 17.08.2016, 12:03:44 »
На JED точно видел парочку. Посмотрите там поиском.

*

effrit

  • Группа развития
  • *****
  • 7443
  • 815
  • effrit.com
Re: Таблицы и адаптивный дизайн
« Ответ #2 : 17.08.2016, 12:09:49 »
как вариант, контейнеру статьи прописать
Код
overflow: auto;
не в курсе, правда, считается это решением для поисковиков, но в ulkit так оборачивают таблицы, во всяком случае

*

creative3d

  • Осваиваюсь на форуме
  • ***
  • 107
  • 5
Re: Таблицы и адаптивный дизайн
« Ответ #3 : 17.08.2016, 12:35:59 »
На JED точно видел парочку. Посмотрите там поиском.
Responsive Tables - Editor - нашел, с ним нельзя в таблицы картинки пихать, да и плагины не хотелось бы ставить...
Код
overflow: auto;
Надо будет попробовать, спасибо.
А как наоборот сделать, чтобы они сжимались под размер экрана?

*

effrit

  • Группа развития
  • *****
  • 7443
  • 815
  • effrit.com
Re: Таблицы и адаптивный дизайн
« Ответ #4 : 17.08.2016, 12:51:43 »
чтобы все красиво жалось под размер, надо тучу времени убить и стандартизировать таблицы.
а если много столбцов, то вообще никак, либо все в кашу превратится, либо придется часть ячеек скрывать и это тоже нетривиально, так что проще просто прокуртку делать для блока статьи.
ну или гугли, выбирай понравившееся решение и под него затачивай каждую таблицу.

*

effrit

  • Группа развития
  • *****
  • 7443
  • 815
  • effrit.com
Re: Таблицы и адаптивный дизайн
« Ответ #5 : 17.08.2016, 12:59:34 »
ну т.е. по умолчанию лучше всем таблицам прописать в CSS
Код
table{width: 98%;}
и не задавать фиксированную ширину для ячеек, чтобы на планшетах не было скрола, а на мобильниках пусть уже листают

*

fsv

  • Практически профи
  • *******
  • 2506
  • 367
Re: Таблицы и адаптивный дизайн
« Ответ #6 : 18.08.2016, 01:08:18 »
Есть какие-нибудь решения на этот счет?
есть, и еще пачка, но мне первого пока хватало
Заказать разработку:    расширения Joomla  |   интерфейсы на javascript(jQuery)  |  мобильные приложения

*

neogeek

  • Давно я тут
  • ****
  • 203
  • 18
Re: Таблицы и адаптивный дизайн
« Ответ #7 : 18.08.2016, 07:28:19 »
Я обычно скриптом оборачиваю таблицы в div и этому диву даю overflow

*

creative3d

  • Осваиваюсь на форуме
  • ***
  • 107
  • 5
Re: Таблицы и адаптивный дизайн
« Ответ #8 : 18.08.2016, 09:05:29 »
Я обычно скриптом оборачиваю таблицы в div и этому диву даю overflow
Звучит не очень.
есть, и еще пачка
Спасибо.
Не знаете случайно как тестировать мобильную версию локально на компьютере?

*

neogeek

  • Давно я тут
  • ****
  • 203
  • 18
Re: Таблицы и адаптивный дизайн
« Ответ #9 : 18.08.2016, 09:14:40 »
Звучит не очень.Спасибо.
одна строчка на js, одна в CSS и работает на все 100% без всяких дополнительных модулей и плагинов

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

*

creative3d

  • Осваиваюсь на форуме
  • ***
  • 107
  • 5
Re: Таблицы и адаптивный дизайн
« Ответ #10 : 18.08.2016, 09:27:11 »
одна строчка на js, одна в CSS
Тогда может поподробнее об этих 2х строчках расскажете? Точнее о js. Хотя div-ом оборачивать... Вот, что звучит не очень.
« Последнее редактирование: 18.08.2016, 09:51:32 от creative3d »

*

AlekVolsk

  • Профи
  • ********
  • 6301
  • 336
Re: Таблицы и адаптивный дизайн
« Ответ #11 : 18.08.2016, 11:59:02 »
Не знаете случайно как тестировать мобильную версию локально на компьютере?
в браузерах сейчас имеется волшебная комбинация ctrl+shift+m, в лиcе доступна сразу. в Chrome доступна при включенном инспекторе кода ctrl+shift+i

*

neogeek

  • Давно я тут
  • ****
  • 203
  • 18
Re: Таблицы и адаптивный дизайн
« Ответ #12 : 18.08.2016, 12: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

  • Давно я тут
  • ****
  • 203
  • 18
Re: Таблицы и адаптивный дизайн
« Ответ #13 : 18.08.2016, 12:07:40 »
Можно еще дописать скрипт при необходимости, чтобы срабатывал к примеру при определенном разрешении экрана.

*

creative3d

  • Осваиваюсь на форуме
  • ***
  • 107
  • 5
Re: Таблицы и адаптивный дизайн
« Ответ #14 : 18.08.2016, 14:45:08 »
Можно еще дописать скрипт
Спасибо.
в браузерах сейчас имеется волшебная комбинация
Спасибо. Не знал.
Насобирал информацию. Позже буду проверять :)

*

creative3d

  • Осваиваюсь на форуме
  • ***
  • 107
  • 5
Re: Таблицы и адаптивный дизайн
« Ответ #15 : 28.08.2016, 21:32:00 »
Поковырялся в этой теме. Правильное решение такое, может кому пригодится:
✓ Нужен Bootstrap.
• Маленькие таблицы можно заменить div-ами, например:
Код: html4strict
<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:
Код: html4strict
<div class="table-responsive"></div>
Появятся скроллы.
• C версии Bootstrap 4, для определенных таблиц можно добавить класс .table-reflow, тогда вертикальные столбцы станут горизонтальными и наоборот. Сейчас содержимое этого класса надо бы найти еще...
У меня с половиной таблиц куча проблем при сжатии, поэтому придется вот каждую исправлять, подтачивая под один из этих трех способов, тяжко будет... :(

*

AlekVolsk

  • Профи
  • ********
  • 6301
  • 336
Re: Таблицы и адаптивный дизайн
« Ответ #16 : 28.08.2016, 22:42:20 »
✓ Нужен Bootstrap.
вот даром бы его не надо ))) по сути вы применили решение для колоночной обертки, а не для самой таблицы

*

creative3d

  • Осваиваюсь на форуме
  • ***
  • 107
  • 5
Re: Таблицы и адаптивный дизайн
« Ответ #17 : 29.08.2016, 08:21:38 »
вот даром бы его не надо )))
Ну не знаю. Текущая Joomla его использует, Joomla 4 будет использовать Bootstrap 4, мой шаблон его поддерживает. Что еще надо?

*

vitzer

  • Давно я тут
  • ****
  • 247
  • 4
Re: Таблицы и адаптивный дизайн
« Ответ #18 : 13.10.2016, 00: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

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


*

Артём 2014

  • Завсегдатай
  • *****
  • 487
  • 2
Re: Таблицы и адаптивный дизайн
« Ответ #20 : 19.10.2016, 23:32:11 »
В общем, допетрил.
Код:
$(document).ready(function () {
  $("table").wrap("<div class='table-wrap'></div>");/*-- Обертываем таблицы дивом --*/
});
вставил в template.js, а
код:
.table-wrap{
  overflow: auto;
}
в template.css.
Теперь все работает, а страницы с таблицами соответствуют требованиям адаптивности для мобильных устройств.


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

*

vitzer

  • Давно я тут
  • ****
  • 247
  • 4
Re: Таблицы и адаптивный дизайн
« Ответ #21 : 20.10.2016, 00:04:09 »
сделал так как вы написали ничего не вышло
Странно, у меня сработало. Может дело в шаблоне? У меня протостар.
И да, из-за кэширования браузера я тоже не сразу увидел, что сработало.

*

Артём 2014

  • Завсегдатай
  • *****
  • 487
  • 2
Re: Таблицы и адаптивный дизайн
« Ответ #22 : 20.10.2016, 00:36:03 »
смотрите в папке template.css. мы в конце вставляем код .table-wrap{
  overflow: auto;

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

*

Артём 2014

  • Завсегдатай
  • *****
  • 487
  • 2
Re: Таблицы и адаптивный дизайн
« Ответ #23 : 20.10.2016, 00:36:13 »
может я что то напартачил

*

vitzer

  • Давно я тут
  • ****
  • 247
  • 4
Re: Таблицы и адаптивный дизайн
« Ответ #24 : 20.10.2016, 01: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, 01:43:58 от vitzer »

*

neogeek

  • Давно я тут
  • ****
  • 203
  • 18
Re: Таблицы и адаптивный дизайн
« Ответ #25 : 20.10.2016, 09: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

  • Практически профи
  • *******
  • 2100
  • 94
Re: Таблицы и адаптивный дизайн
« Ответ #26 : 20.10.2016, 13:14:52 »
только хотел предложить версию о конфликте --- но опередили --- jQuery.noConflict();
Попробуйте, как вариант, этот вариант скрипта разместить в хидер-е шаблона

*

Артём 2014

  • Завсегдатай
  • *****
  • 487
  • 2
Re: Таблицы и адаптивный дизайн
« Ответ #27 : 23.10.2016, 18: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?