Форум русской поддержки Joomla!® CMS
09.12.2016, 08:01:17 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Как адаптировать таблицу к мобильному устройству?

 (Прочитано 130 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Артём 2014
Завсегдатай
*****

Репутация: +5/-3
Offline Offline

Пол: Мужской
Сообщений: 491



« : 17.10.2016, 01:05:38 »

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

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6460



« Ответ #1 : 17.10.2016, 01:55:49 »

http://codepen.io/geoffyuen/pen/FCBEg
Записан
Артём 2014
Завсегдатай
*****

Репутация: +5/-3
Offline Offline

Пол: Мужской
Сообщений: 491



« Ответ #2 : 17.10.2016, 02:50:02 »

используя HTML то что вы мне скинули, я скинул на сайт, и растянул таблицу, так как она слишком маленькая, в итоге тоже самое на мобильном она за границы вылазит...
Записан
Филипп Сорокин
Живу я здесь
******

Репутация: +121/-4
Offline Offline

Пол: Мужской
Сообщений: 1466


« Ответ #3 : 17.10.2016, 03:23:51 »

Родительский контейнер должен иметь:
Код
overflow-x: auto;
Записан
effrit
Группа развития
*****

Репутация: +732/-7
Offline Offline

Пол: Мужской
Сообщений: 6815


effrit.com


« Ответ #4 : 17.10.2016, 08:22:24 »

http://joomlaforum.ru/index.php/topic,330188.msg1660668.html#msg1660668
Записан
Артём 2014
Завсегдатай
*****

Репутация: +5/-3
Offline Offline

Пол: Мужской
Сообщений: 491



« Ответ #5 : 19.10.2016, 20: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
Завсегдатай
*****

Репутация: +20/-0
Offline Offline

Пол: Мужской
Сообщений: 417



« Ответ #6 : 19.10.2016, 20:51:39 »

Таблицы и адаптивный дизайн рассматривали в
http://joomlaforum.ru/index.php/topic,330188.new.html
Записан
Артём 2014
Завсегдатай
*****

Репутация: +5/-3
Offline Offline

Пол: Мужской
Сообщений: 491



« Ответ #7 : 19.10.2016, 22:32:36 »

там не решен вопрос ничего не вышло(
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet