Как сделать адаптивными таблицы? - Joomla 3.x: Общие вопросы

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

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


так в компе:


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

Попробуйте убрать жесткую ширину width для ячеек таблицы td, сохраните, обновите страницу в браузере.
Или хотя бы пропишите width в процентах, например, 33%

Для img тоже лучше убрать атрибуты width и height.

ПС. По-другому, кроме как таблицей, корректно подобный вывод материала не сделать?

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

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

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

Нафига табличная верстка?
Флексы или div

Табличная верстка иногда нужна (когда это таблица с данными) и не должна быть в таких случаях порицаема, в союзе с бутстрапом ессесно, но в данном случае только дивная, чтобы div-ы на узких экранах прыгали один под другой 

Табличная верстка иногда нужна (когда это таблица с данными) и не должна быть в таких случаях порицаема,

Табличная верстка в том виде в котором она представлена у автора темы в 99.99 % случаях должна быть порицаема. Давно уже придуманы адаптивные таблицы которые хорошо выглядят на  экране любого размера.

Таблицы уже не актуальны. Только в div.

Попробуйте убрать жесткую ширину width для ячеек таблицы td, сохраните, обновите страницу в браузере.
Или хотя бы пропишите width в процентах, например, 33%

Для img тоже лучше убрать атрибуты width и height.

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

Ребят, это готовый шаблон, beez3, практически не тронутый, адаптивный. Что не так?
А таблица - это резмещение данных в материале. Как иначе хорошо это разместить, чтоб не разьезжалось?

Ребят, это готовый шаблон, beez3, практически не тронутый, адаптивный. Что не так?
А таблица - это резмещение данных в материале. Как иначе хорошо это разместить, чтоб не разьезжалось?

верстать на div а не на td

Ребят, это готовый шаблон, 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 который в вашем шаблоне используется

верстать на div а не на td

в самом материале?

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

Извините, но я не поняла: зачем тогда в интерфейсе визуальный редактор с теми же таблицами?

Таблицы для таблиц
Контент можно ращмещать в редакторе изпользуя позиционирование

Контент можно ращмещать в редакторе изпользуя позиционирование

Как его использовать? Тегами? Т.е., используя интерфейс без кода нельзя расположить картинки, например, три по вертикали и подписи под каждой?

В настройках картинки. Смотрите позиционирование
Там де и размеры

Там де и размеры

Очень прошу: ткните, пожалуйста, носом:

Блин, сори. У вас тини
На JCE больше настроек

На JCE больше настроек

Спасибо! Поставила JCE. Яснее не стало(
Какие настройки прописать к четырем, допустим, картинкам, чтобы они располагались по горизонтали, а внизу к каждой были подписи? И чтоб подписи сместились вместе с картинками при изменении экрана?

Таблицами можно сделать, если вам так проще, и если выводимый контент подразумевает табличную верстку, например характеристики товара в интернет-магазинах, это каждый вебмастер и верстальщик решает для себя сам, я лично люблю, например, прайс-лист сделанный таблицей. Но надо зайти в код редактора и привязать к вашим сверстанным таблицам стили bootstrap.
https://getbootstrap.ru/docs/v4-alpha/content/tables/
https://itchief.ru/lessons/bootstrap-3/30-bootstrap-3-tables
Но совсем сперва почитать по ссылкам выше как это делать и посмотреть в сторону div, вам даже пример кода тут показали дважды.

https://getbootstrap.ru/docs/v4-alpha/content/tables/
https://itchief.ru/lessons/bootstrap-3/30-bootstrap-3-tables

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

Спасибо! Поставила JCE. Яснее не стало(
Какие настройки прописать к четырем, допустим, картинкам, чтобы они располагались по горизонтали, а внизу к каждой были подписи? И чтоб подписи сместились вместе с картинками при изменении экрана?

Такой функционал JCE есть только у про версии.

Такой функционал JCE есть только у про версии.

Кстати да.
Тогда просто верстайте дивами
Ну или если совсем все печально, установите что то типа shortcode ultimate
Там вообще все просто

Так, стартовый вариант с  таблицей:
Строке таблицы, где картинки, дописываете класс <tr class="respons">
В ваш CSS файл дописываете несколько строк

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

А разве в нём что то радикально менялось в таблицах, он версии к версии? Ссылки на 3 и 4 версию, не знаю какая у автора, но предполагаю если сайт ещё верстается, то наверное свежая. А визиредакторы и делать через них позиционирование совсем не тру.

А а обычному пользователю, знакомому с интуитивно понятным интерфейсом редактирования, как лучше размещать картинки в тексте таким образом?

А а обычному пользователю, знакомому с интуитивно понятным интерфейсом редактирования, как лучше размещать картинки в тексте таким образом?

Так если не хотите воспользоваться какой нибудь адаптивной галереей, то, как написано выше, каждый рисунок в ячейку таблицы, уменьшить до нужного размера, ширина таблицы  width: 100%; или 90% если хотите, что бы наверняка за пределы экрана не вылезло.

Лично я сам адаптирую таблицы через медиазапросы. Пример:
https://imgural.ru/product/lpu
Посмотрите как выглядит одна и та же таблица на ПК и в мобильной версии сайта.

Лично я сам адаптирую таблицы через медиазапросы

Очень Даже Классно!

Лично я сам адаптирую таблицы через медиазапросы. Пример:
https://imgural.ru/product/lpu
Посмотрите как выглядит одна и та же таблица на ПК и в мобильной версии сайта.

Интересно получилось, нужно попробовать сделать также