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

Zeya

  • Захожу иногда
  • 177
  • 0 / 0
Подскажите, пожалуйста, что сделать, чтобы таблица в материале была резиновой? Как быть с картинками в ней?
ПС. По-другому, кроме как таблицей, корректно подобный вывод материала не сделать?

так выглядит в телефоне(((


так в компе:


ссыль:
http://kinsevera.ru/index.php/planiruemye-meropriyatiya
*

rsn

  • Захожу иногда
  • 486
  • 34 / 3
Re: Как сделать адаптивными таблицы?
« Ответ #1 : 01.09.2020, 22:19:23 »
Попробуйте убрать жесткую ширину width для ячеек таблицы td, сохраните, обновите страницу в браузере.
Или хотя бы пропишите width в процентах, например, 33%

Для img тоже лучше убрать атрибуты width и height.
Возможно, будет интересно: Интеграция с Ozon
*

KKAAZZOO

  • Живу я здесь
  • 2228
  • 113 / 9
Re: Как сделать адаптивными таблицы?
« Ответ #2 : 01.09.2020, 23:14:48 »
ПС. По-другому, кроме как таблицей, корректно подобный вывод материала не сделать?

У вас же Bootstrap на сайте, адаптивность делается версткой, на дивах

<div class="row">
  <div class="span4">...</div>
  <div class="span4">...</div>
  <div class="span4">...</div>
</div>

Вот в материале и отверстайте нужные данные по данному шаблону.
*

AlexB

  • Завсегдатай
  • 1973
  • 53 / 2
Re: Как сделать адаптивными таблицы?
« Ответ #3 : 01.09.2020, 23:23:03 »
Нафига табличная верстка?
Флексы или div
*

cntrl

  • Захожу иногда
  • 179
  • 6 / 0
Re: Как сделать адаптивными таблицы?
« Ответ #4 : 02.09.2020, 03:04:36 »
Табличная верстка иногда нужна (когда это таблица с данными) и не должна быть в таких случаях порицаема, в союзе с бутстрапом ессесно, но в данном случае только дивная, чтобы div-ы на узких экранах прыгали один под другой  yes!
*

KKAAZZOO

  • Живу я здесь
  • 2228
  • 113 / 9
Re: Как сделать адаптивными таблицы?
« Ответ #5 : 02.09.2020, 09:04:21 »
Табличная верстка иногда нужна (когда это таблица с данными) и не должна быть в таких случаях порицаема,

Табличная верстка в том виде в котором она представлена у автора темы в 99.99 % случаях должна быть порицаема. Давно уже придуманы адаптивные таблицы которые хорошо выглядят на  экране любого размера.
« Последнее редактирование: 02.09.2020, 09:08:13 от KKAAZZOO »
*

wishlight

  • Живу я здесь
  • 4871
  • 285 / 1
  • 300 руб очень быстрый хостинг в ЕС
Re: Как сделать адаптивными таблицы?
« Ответ #6 : 02.09.2020, 15:31:29 »
Таблицы уже не актуальны. Только в div.
*

Zeya

  • Захожу иногда
  • 177
  • 0 / 0
Re: Как сделать адаптивными таблицы?
« Ответ #7 : 02.09.2020, 18:19:03 »
Попробуйте убрать жесткую ширину width для ячеек таблицы td, сохраните, обновите страницу в браузере.
Или хотя бы пропишите width в процентах, например, 33%

Для img тоже лучше убрать атрибуты width и height.
Так все просто! Убрала ширину таблицы и красота! Спасибо!
 yes!
А, если убираю размеры изображения - то они делаются в полную величину...
*

Zeya

  • Захожу иногда
  • 177
  • 0 / 0
Re: Как сделать адаптивными таблицы?
« Ответ #8 : 02.09.2020, 18:22:18 »
Ребят, это готовый шаблон, beez3, практически не тронутый, адаптивный. Что не так?
А таблица - это резмещение данных в материале. Как иначе хорошо это разместить, чтоб не разьезжалось?
*

AlexB

  • Завсегдатай
  • 1973
  • 53 / 2
Re: Как сделать адаптивными таблицы?
« Ответ #9 : 02.09.2020, 19:17:35 »
Ребят, это готовый шаблон, beez3, практически не тронутый, адаптивный. Что не так?
А таблица - это резмещение данных в материале. Как иначе хорошо это разместить, чтоб не разьезжалось?
верстать на div а не на td
*

KKAAZZOO

  • Живу я здесь
  • 2228
  • 113 / 9
Re: Как сделать адаптивными таблицы?
« Ответ #10 : 02.09.2020, 19:40:17 »
Ребят, это готовый шаблон, beez3, практически не тронутый, адаптивный. Что не так?
А таблица - это резмещение данных в материале. Как иначе хорошо это разместить, чтоб не разьезжалось?

Шаблон адаптивный, но вы этой адаптивностью не пользуетесь. Вам уже сказали как сделать,  с помощью адаптивных классов row и span разместить информацию с помощью элемента div, я даже шаблон HTML вам дал.

Напишу еще раз.

<div class="row">
  <div class="span4">тут ваша информация</div>
  <div class="span4">тут ваша информация</div>
  <div class="span4">тут ваша информация</div>
</div>


P.S https://getbootstrap.com/2.3.2/index.html обязательно для ликбеза по Bootstrap который в вашем шаблоне используется

*

Zeya

  • Захожу иногда
  • 177
  • 0 / 0
Re: Как сделать адаптивными таблицы?
« Ответ #11 : 17.09.2020, 15:01:22 »
верстать на div а не на td
в самом материале?

Шаблон адаптивный, но вы этой адаптивностью не пользуетесь. Вам уже сказали как сделать,  с помощью адаптивных классов row и span разместить информацию с помощью элемента div, я даже шаблон HTML вам дал.
Извините, но я не поняла: зачем тогда в интерфейсе визуальный редактор с теми же таблицами?

*

AlexB

  • Завсегдатай
  • 1973
  • 53 / 2
Re: Как сделать адаптивными таблицы?
« Ответ #12 : 17.09.2020, 15:45:20 »
Таблицы для таблиц
Контент можно ращмещать в редакторе изпользуя позиционирование
*

Zeya

  • Захожу иногда
  • 177
  • 0 / 0
Re: Как сделать адаптивными таблицы?
« Ответ #13 : 17.09.2020, 19:05:13 »
Контент можно ращмещать в редакторе изпользуя позиционирование
Как его использовать? Тегами? Т.е., используя интерфейс без кода нельзя расположить картинки, например, три по вертикали и подписи под каждой?
*

AlexB

  • Завсегдатай
  • 1973
  • 53 / 2
Re: Как сделать адаптивными таблицы?
« Ответ #14 : 17.09.2020, 20:17:42 »
В настройках картинки. Смотрите позиционирование
Там де и размеры
*

Zeya

  • Захожу иногда
  • 177
  • 0 / 0
Re: Как сделать адаптивными таблицы?
« Ответ #15 : 17.09.2020, 20:44:14 »
Там де и размеры
Очень прошу: ткните, пожалуйста, носом:


*

AlexB

  • Завсегдатай
  • 1973
  • 53 / 2
Re: Как сделать адаптивными таблицы?
« Ответ #16 : 17.09.2020, 22:06:58 »
Блин, сори. У вас тини
На JCE больше настроек
*

Zeya

  • Захожу иногда
  • 177
  • 0 / 0
Re: Как сделать адаптивными таблицы?
« Ответ #17 : 18.09.2020, 00:07:55 »
На JCE больше настроек
Спасибо! Поставила JCE. Яснее не стало(
Какие настройки прописать к четырем, допустим, картинкам, чтобы они располагались по горизонтали, а внизу к каждой были подписи? И чтоб подписи сместились вместе с картинками при изменении экрана? ::)

*

cntrl

  • Захожу иногда
  • 179
  • 6 / 0
Re: Как сделать адаптивными таблицы?
« Ответ #18 : 18.09.2020, 01:21:42 »
Таблицами можно сделать, если вам так проще, и если выводимый контент подразумевает табличную верстку, например характеристики товара в интернет-магазинах, это каждый вебмастер и верстальщик решает для себя сам, я лично люблю, например, прайс-лист сделанный таблицей. Но надо зайти в код редактора и привязать к вашим сверстанным таблицам стили bootstrap.
https://getbootstrap.ru/docs/v4-alpha/content/tables/
https://itchief.ru/lessons/bootstrap-3/30-bootstrap-3-tables
Но совсем сперва почитать по ссылкам выше как это делать и посмотреть в сторону div, вам даже пример кода тут показали дважды.
*

KKAAZZOO

  • Живу я здесь
  • 2228
  • 113 / 9
Re: Как сделать адаптивными таблицы?
« Ответ #19 : 18.09.2020, 08:32:43 »
https://getbootstrap.ru/docs/v4-alpha/content/tables/
https://itchief.ru/lessons/bootstrap-3/30-bootstrap-3-tables

Не путайте человека, эти ссылки не имеют отношения к ее версии Bootstrap.
*

khan-alex

  • Давно я тут
  • 599
  • 26 / 1
Re: Как сделать адаптивными таблицы?
« Ответ #20 : 18.09.2020, 09:52:08 »
Спасибо! Поставила JCE. Яснее не стало(
Какие настройки прописать к четырем, допустим, картинкам, чтобы они располагались по горизонтали, а внизу к каждой были подписи? И чтоб подписи сместились вместе с картинками при изменении экрана? ::)
Такой функционал JCE есть только у про версии.
*

AlexB

  • Завсегдатай
  • 1973
  • 53 / 2
Re: Как сделать адаптивными таблицы?
« Ответ #21 : 18.09.2020, 10:06:35 »
Такой функционал JCE есть только у про версии.
Кстати да.
Тогда просто верстайте дивами
Ну или если совсем все печально, установите что то типа shortcode ultimate
Там вообще все просто
*

fbr

  • Завсегдатай
  • 1516
  • 174 / 7
Re: Как сделать адаптивными таблицы?
« Ответ #22 : 18.09.2020, 10:44:38 »
Так, стартовый вариант с  таблицей:
Строке таблицы, где картинки, дописываете класс <tr class="respons">
В ваш CSS файл дописываете несколько строк

Код
@media (max-width: 600px) {
tr.respons, tr.respons >td {display: block;}
}


*

cntrl

  • Захожу иногда
  • 179
  • 6 / 0
Re: Как сделать адаптивными таблицы?
« Ответ #23 : 18.09.2020, 15:28:19 »
Не путайте человека, эти ссылки не имеют отношения к ее версии Bootstrap.
А разве в нём что то радикально менялось в таблицах, он версии к версии? Ссылки на 3 и 4 версию, не знаю какая у автора, но предполагаю если сайт ещё верстается, то наверное свежая. А визиредакторы и делать через них позиционирование совсем не тру.
*

Zeya

  • Захожу иногда
  • 177
  • 0 / 0
Re: Как сделать адаптивными таблицы?
« Ответ #24 : 16.10.2020, 14:59:13 »
А а обычному пользователю, знакомому с интуитивно понятным интерфейсом редактирования, как лучше размещать картинки в тексте таким образом?
*

khan-alex

  • Давно я тут
  • 599
  • 26 / 1
Re: Как сделать адаптивными таблицы?
« Ответ #25 : 16.10.2020, 15:10:41 »
А а обычному пользователю, знакомому с интуитивно понятным интерфейсом редактирования, как лучше размещать картинки в тексте таким образом?
Так если не хотите воспользоваться какой нибудь адаптивной галереей, то, как написано выше, каждый рисунок в ячейку таблицы, уменьшить до нужного размера, ширина таблицы  width: 100%; или 90% если хотите, что бы наверняка за пределы экрана не вылезло.
*

dm-krv

  • Завсегдатай
  • 1027
  • 28 / 0
Re: Как сделать адаптивными таблицы?
« Ответ #27 : 16.10.2020, 17:06:24 »
Лично я сам адаптирую таблицы через медиазапросы. Пример:
https://imgural.ru/product/lpu
Посмотрите как выглядит одна и та же таблица на ПК и в мобильной версии сайта.
*

gartes

  • Завсегдатай
  • 1641
  • 127 / 5
  • Е = mс²
Re: Как сделать адаптивными таблицы?
« Ответ #28 : 16.10.2020, 17:14:47 »
Лично я сам адаптирую таблицы через медиазапросы
Очень Даже Классно!
*

Verhov526

  • Осваиваюсь на форуме
  • 21
  • 0 / 1
Re: Как сделать адаптивными таблицы?
« Ответ #29 : 02.11.2020, 17:01:59 »
Лично я сам адаптирую таблицы через медиазапросы. Пример:
https://imgural.ru/product/lpu
Посмотрите как выглядит одна и та же таблица на ПК и в мобильной версии сайта.
Интересно получилось, нужно попробовать сделать также
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как сделать обратную сортировку пунктов?

Автор Damarkuzz

Ответов: 1
Просмотров: 105
Последний ответ 02.04.2021, 22:50:51
от IToro82
Возможно ли сделать унаследование под категорий?

Автор sesil

Ответов: 1
Просмотров: 81
Последний ответ 12.02.2021, 15:53:58
от beliyadm
Как сделать отображение статей модуля горизонтально?

Автор ALEXRAW

Ответов: 17
Просмотров: 191
Последний ответ 06.02.2021, 18:28:42
от AlexB
Позиция fixed до определенного места, как сделать / css?

Автор kiev

Ответов: 22
Просмотров: 167
Последний ответ 26.11.2020, 15:34:16
от kiev
Как сделать пункты выдачи VirtueMart?

Автор Damarkuzz

Ответов: 4
Просмотров: 237
Последний ответ 15.10.2020, 00:03:26
от rsn