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

creative3d

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

Olg

  • Завсегдатай
  • 1170
  • 88 / 2
Re: Таблицы и адаптивный дизайн
« Ответ #1 : 17.08.2016, 10:03:44 »
На JED точно видел парочку. Посмотрите там поиском.
*

effrit

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

creative3d

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

effrit

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

effrit

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

fsv

  • Живу я здесь
  • 2765
  • 402 / 2
Re: Таблицы и адаптивный дизайн
« Ответ #6 : 17.08.2016, 23:08:18 »
Есть какие-нибудь решения на этот счет?
есть, и еще пачка, но мне первого пока хватало
Веб-разработка: заказ. Только новая объемная разработка. Качественно, дорого.
*

neogeek

  • Захожу иногда
  • 196
  • 21 / 2
Re: Таблицы и адаптивный дизайн
« Ответ #7 : 18.08.2016, 05:28:19 »
Я обычно скриптом оборачиваю таблицы в div и этому диву даю overflow
*

creative3d

  • Захожу иногда
  • 186
  • 6 / 0
Re: Таблицы и адаптивный дизайн
« Ответ #8 : 18.08.2016, 07:05:29 »
Я обычно скриптом оборачиваю таблицы в div и этому диву даю overflow
Звучит не очень.
есть, и еще пачка
Спасибо.
Не знаете случайно как тестировать мобильную версию локально на компьютере?
*

neogeek

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

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

creative3d

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

AlekVolsk

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

neogeek

  • Захожу иногда
  • 196
  • 21 / 2
Re: Таблицы и адаптивный дизайн
« Ответ #12 : 18.08.2016, 10: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

  • Захожу иногда
  • 196
  • 21 / 2
Re: Таблицы и адаптивный дизайн
« Ответ #13 : 18.08.2016, 10:07:40 »
Можно еще дописать скрипт при необходимости, чтобы срабатывал к примеру при определенном разрешении экрана.
*

creative3d

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

creative3d

  • Захожу иногда
  • 186
  • 6 / 0
Re: Таблицы и адаптивный дизайн
« Ответ #15 : 28.08.2016, 19: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

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

creative3d

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

vitzer

  • Захожу иногда
  • 303
  • 5 / 0
Re: Таблицы и адаптивный дизайн
« Ответ #18 : 12.10.2016, 22: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

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

*

Артём 2014

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


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

vitzer

  • Захожу иногда
  • 303
  • 5 / 0
Re: Таблицы и адаптивный дизайн
« Ответ #21 : 19.10.2016, 22:04:09 »
сделал так как вы написали ничего не вышло
Странно, у меня сработало. Может дело в шаблоне? У меня протостар.
И да, из-за кэширования браузера я тоже не сразу увидел, что сработало.
*

Артём 2014

  • Захожу иногда
  • 484
  • 6 / 3
Re: Таблицы и адаптивный дизайн
« Ответ #22 : 19.10.2016, 22:36:03 »
смотрите в папке template.css. мы в конце вставляем код .table-wrap{
  overflow: auto;

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

Артём 2014

  • Захожу иногда
  • 484
  • 6 / 3
Re: Таблицы и адаптивный дизайн
« Ответ #23 : 19.10.2016, 22:36:13 »
может я что то напартачил
*

vitzer

  • Захожу иногда
  • 303
  • 5 / 0
Re: Таблицы и адаптивный дизайн
« Ответ #24 : 19.10.2016, 23:39:05 »
может я что то напартачил
Проверьте еще раз.

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

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

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

neogeek

  • Захожу иногда
  • 196
  • 21 / 2
Re: Таблицы и адаптивный дизайн
« Ответ #25 : 20.10.2016, 07: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

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

Артём 2014

  • Захожу иногда
  • 484
  • 6 / 3
Re: Таблицы и адаптивный дизайн
« Ответ #27 : 23.10.2016, 16: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?
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Можно ли на Joomla создать такой дизайн?

Автор arel

Ответов: 6
Просмотров: 721
Последний ответ 19.04.2019, 12:53:45
от AlexK
Макет в виде таблицы

Автор Папа Вовы

Ответов: 12
Просмотров: 1117
Последний ответ 05.05.2018, 00:24:45
от Папа Вовы
Дизайн сайта по еде!

Автор tauras2008

Ответов: 1
Просмотров: 721
Последний ответ 20.02.2016, 08:30:48
от AlekVolsk
Шаблон Tribune2 - В IE и в Firefox разваливается дизайн

Автор timber

Ответов: 0
Просмотров: 822
Последний ответ 17.01.2016, 19:21:25
от timber
Изменить дизайн меню в шаблоне SJ Market

Автор Klassic

Ответов: 4
Просмотров: 2107
Последний ответ 25.11.2015, 22:22:57
от voland