Новости Joomla

Обновление Slogin 2.10.1

Один из старейших компонентов социальной авторизации для Joomla. Поддерживает почти все популярные сервисы авторизации и имеет огромное количество сторонних плагинов и модулей интеграции.

Вышли релизы Joomla 4.0.3 и Joomla 3.10.2

Доступны к загрузке Joomla 4.0.3 и Joomla 3.10.2. Это релизы с исправлениями ошибок и улучшениями для серий Joomla 4.0.x и 3.10.x.

Вышли релизы Joomla 4.0.3 и Joomla 3.10.2

Доступны к загрузке Joomla 4.0.3 и Joomla 3.10.2. Это релизы с исправлениями ошибок и улучшениями для серий Joomla 4.0.x и 3.10.x. 

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

Артём 2014

  • Захожу иногда
  • 484
  • 6 / 3
Как адаптировать таблицу к мобильному устройству?
« : 17.10.2016, 00:05:38 »
Приветствую, подскажите как адаптировать таблицу созданную через JCE редактор под мобильное устройство, в целом шаблон адаптирован под мобильный, но именно таблицы почему то выходят за границы когда сижу сижу с мобильного.....кто нибудь решал подобного рода проблемы?
Записан
*

AlekVolsk

  • Гуру
  • 6916
  • 411 / 4
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #1 : 17.10.2016, 00:55:49 »
Записан
*

Артём 2014

  • Захожу иногда
  • 484
  • 6 / 3
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #2 : 17.10.2016, 01:50:02 »
используя HTML то что вы мне скинули, я скинул на сайт, и растянул таблицу, так как она слишком маленькая, в итоге тоже самое на мобильном она за границы вылазит...
Записан
*

Филипп Сорокин

  • Завсегдатай
  • 1917
  • 159 / 4
  • разработчик.москва
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #3 : 17.10.2016, 02:23:51 »
Родительский контейнер должен иметь:
Код: css
overflow-x: auto;
Записан
*

effrit

  • Легенда
  • 10057
  • 1104 / 13
  • effrit.com
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #4 : 17.10.2016, 07:22:24 »
Записан
*

Артём 2014

  • Захожу иногда
  • 484
  • 6 / 3
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #5 : 19.10.2016, 19:25:43 »
<script type= "text/javascript">
$(document).ready(function () {
  $("table").wrap("<div class='table-wrap'></div>");/*-- Обертываем таблицы дивом --*/
});
</script>
<style type="text/css">
.table-wrap{
  overflow:auto;
}
</style>

спасибо а как это вставить в HTML код таблицы? куда именно к примеру: вот таблица <table border="1" style="height: 82px;">
<tbody>
<tr>
<td>&nbsp;56344</td>
<td>&nbsp;43443</td>
<td>&nbsp;46346</td>
</tr>
<tr>
<td>&nbsp;43</td>
<td>&nbsp;436</td>
<td>&nbsp;36463</td>
</tr>
<tr>
<td>&nbsp;43</td>
<td>&nbsp;36</td>
<td>&nbsp;36</td>
</tr>
</tbody>
</table>
Записан
*

Gosha5767

  • Захожу иногда
  • 484
  • 26 / 0
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #6 : 19.10.2016, 19:51:39 »
Таблицы и адаптивный дизайн рассматривали в
http://joomlaforum.ru/index.php/topic,330188.new.html
Записан
Чистка сайта от дублей в Яндекс и Google.
Миграция Joomla 1.5 до Joomla 3.хх
Доработка сайта
*

Артём 2014

  • Захожу иногда
  • 484
  • 6 / 3
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #7 : 19.10.2016, 21:32:36 »
там не решен вопрос ничего не вышло(
Записан
*

stoorm89

  • Осваиваюсь на форуме
  • 25
  • 0 / 0
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #8 : 12.01.2019, 13:53:43 »
Цитата: Артём 2014 от 19.10.2016, 21:32:36
там не решен вопрос ничего не вышло(

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

AlekVolsk

  • Гуру
  • 6916
  • 411 / 4
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #9 : 12.01.2019, 17:18:04 »
Рецепт простейший: при адаптации ячейки строк (td и th) становятся блочными и выстраиваются не в строку, а в столбец и оформляются в соответствии обновленным позиционированием, это исключительно вопрос грамотной вёрстки
Записан
*

Aleks.Denezh

  • Живу я здесь
  • 3406
  • 427 / 4
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #10 : 12.01.2019, 17:45:54 »
Цитата: AlekVolsk от 12.01.2019, 17:18:04
Рецепт простейший: при адаптации ячейки строк (td и th) становятся блочными и выстраиваются не в строку, а в столбец и оформляются в соответствии обновленным позиционированием, это исключительно вопрос грамотной вёрстки
и все это будет работать до первой сложной таблицы с кучей colspan и rowspan?
« Последнее редактирование: 12.01.2019, 17:51:01 от Aleks.Denezh »
Записан
*

AlekVolsk

  • Гуру
  • 6916
  • 411 / 4
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #11 : 12.01.2019, 20:06:27 »
Цитата: Aleks.Denezh от 12.01.2019, 17:45:54
и все это будет работать до первой сложной таблицы с кучей colspan и rowspan?
Саш, всё всегда индивидуально, в большинстве случаев это работает, thead при адаптации скрывается и всё ок. Во всех сложных случаях всегда будет индивидуальный подход под место.
Записан
*

Aleks.Denezh

  • Живу я здесь
  • 3406
  • 427 / 4
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #12 : 12.01.2019, 20:35:38 »
Цитата: AlekVolsk от 12.01.2019, 20:06:27
Саш, всё всегда индивидуально, в большинстве случаев это работает, thead при адаптации скрывается и всё ок. Во всех сложных случаях всегда будет индивидуальный подход под место.
ну как по мне это катит онли для элементов дизайна, например надо вывести табличку корзины, или какую то табличку которая автоматом формируется из базы..
но при сложных таблицах где могут объединяться несколько ячеек будет полной фигней, ибо судя по тому как я понимаю работает твой пример, оно отобразит только в первом вхождении, в следующих ячейках будет пустота.. единственное что останавливает перед использованием подобного полноценного...
Записан
*

AlekVolsk

  • Гуру
  • 6916
  • 411 / 4
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #13 : 12.01.2019, 23:47:12 »
Цитата: Aleks.Denezh от 12.01.2019, 20:35:38
в следующих ячейках будет пустота
Код
@media (max-width:your-width){
    td:empty{display:none}
}
Саш, я тебе удивлён, чесслово ))
Записан
*

Aleks.Denezh

  • Живу я здесь
  • 3406
  • 427 / 4
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #14 : 13.01.2019, 00:41:57 »
Цитата: AlekVolsk от 12.01.2019, 23:47:12
Код
@media (max-width:your-width){
    td:empty{display:none}
}
Саш, я тебе удивлён, чесслово ))
Какая причина удивления?  :o я когда то себя позиционировал как супер пупер верстальщик?  :o

не понял что это даст, как я понимаю работает всё это по типу, при каком то расширение элементы делаются блочными, добавляется псевдо элемент с content =  то что в data атрибуте тега, а теперь вопрос как будет выглядеть в твоем примере такая таблица:

Спойлер
[свернуть]
Что будет видеть пользователь кода таблица перестроиться в  3-4 и 6-7 строках ? правильно ли я понимаю что в 3 строке он увидет то что нужно, а в 4 уже поля одного будет нехватать, что даст ложные данные для пользователя? так же само  и 5-7 строки?
« Последнее редактирование: 13.01.2019, 03:08:42 от Aleks.Denezh »
Записан
*

lexxbry

  • Живу я здесь
  • 2389
  • 67 / 8
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #15 : 13.01.2019, 01:05:00 »
А не проще ли просто скроллер горизонтальный для блока с таблицей?
Записан
SEO-оптимизация,продвижение
Создание и сопровождение сайтов на Joomla
Миграция
*

Aleks.Denezh

  • Живу я здесь
  • 3406
  • 427 / 4
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #16 : 13.01.2019, 01:07:23 »
Цитата: lexxbry от 13.01.2019, 01:05:00
А не проще ли просто скроллер горизонтальный для блока с таблицей?
вот и я так думаю что это проще )
Записан
*

effrit

  • Легенда
  • 10057
  • 1104 / 13
  • effrit.com
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #17 : 13.01.2019, 14:04:22 »
Цитата: lexxbry от 13.01.2019, 01:05:00
А не проще ли просто скроллер
Нет! Давайте поделимся на 2 лагеря и начнем полноценную войну!
Я - за скролл. Но готов переманиться за кучу денег.  ;D
Записан
*

Aleks.Denezh

  • Живу я здесь
  • 3406
  • 427 / 4
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #18 : 13.01.2019, 15:01:44 »
Цитата: effrit от 13.01.2019, 14:04:22
Нет! Давайте поделимся на 2 лагеря и начнем полноценную войну!
Я - за скролл. Но готов переманиться за кучу денег.  ;D
Война и только война!  *RTFM* HOLY CSS WAR!! yes!
Записан
*

dmitry_stas

  • Легенда
  • 13152
  • 1232 / 8
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #19 : 13.01.2019, 16:22:41 »
Цитата: effrit от 13.01.2019, 14:04:22
Нет! Давайте поделимся на 2 лагеря и начнем полноценную войну!
на 3. будет еще небольшая кучка еретиков которые будут убеждать всех, что выбор инструмента будет зависеть от задачи. но думаю с ними проблем не будет, их мы конечно легко победим совместно, двумя лагерями :)
Записан
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций
*

AlekVolsk

  • Гуру
  • 6916
  • 411 / 4
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #20 : 13.01.2019, 23:02:40 »
тогда я в третьем лагере )
Записан
*

stoorm89

  • Осваиваюсь на форуме
  • 25
  • 0 / 0
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #21 : 16.01.2019, 12:09:07 »
 ::) Пока идет выбор лагерей, начну с простого - скроллер, но  *ОХ-Х-Х*

как его сделать?))

в html:
.layer {
    overflow-x: scroll; /* Добавляем полосу прокрутки */
    width: 300px; /* Ширина блока */
    height: 150px; /* Высота блока */
    padding: 5px; /* Поля вокруг текста */
    border: solid 1px black; /* Параметры рамки */
    white-space: nowrap; /* Запрещаем перенос строк */
   }

Если на определенной странице нажимаю включить редактор и вставляю код, сами понимаете что получается - ничего!  :laugh:
Записан
*

lexxbry

  • Живу я здесь
  • 2389
  • 67 / 8
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #22 : 16.01.2019, 12:21:02 »
Цитата: stoorm89 от 16.01.2019, 12:09:07
как его сделать?))

таблицу в div
<div class="table-responsive">
Записан
SEO-оптимизация,продвижение
Создание и сопровождение сайтов на Joomla
Миграция
*

stoorm89

  • Осваиваюсь на форуме
  • 25
  • 0 / 0
Re: Как адаптировать таблицу к мобильному устройству?
« Ответ #23 : 16.01.2019, 12:38:57 »
Цитата: lexxbry от 16.01.2019, 12:21:02
таблицу в div
<div class="table-responsive">

Дописал еще:
<div class="table-responsive" style="max-width: 100%; overflow: auto;">

и получилось то, что надо было, спасибо!  :D
« Последнее редактирование: 16.01.2019, 13:12:15 от stoorm89 »
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как создавать категории напрямую в базе через таблицы (найти таблицу)?

Автор zxgame

 Ответов: 4
Просмотров: 276 		Последний ответ 21.07.2020, 12:14:21
от NewUsers
Добавление колонки со значениями полей материалов в таблицу списка

Автор scfx

 Ответов: 1
Просмотров: 243 		Последний ответ 13.09.2019, 10:58:34
от beliyadm
Вставка строки в таблицу значений модуля Fabrik

Автор ebonydabster

 Ответов: 0
Просмотров: 246 		Последний ответ 14.02.2019, 09:14:02
от ebonydabster
Добавление новой статьи напрямую в таблицу _content

Автор ruslan13

 Ответов: 3
Просмотров: 292 		Последний ответ 28.05.2018, 10:48:12
от ruslan13
В VM3 в корзине сделать таблицу доставки?

Автор Усач911

 Ответов: 0
Просмотров: 431 		Последний ответ 06.12.2017, 15:02:53
от Усач911