WebSite X5Help Center

 
Alexander C.
Alexander C.
User

Таблица для отображения на смартфонах и планшетах  ru

Auteur : Alexander C.
Visité 1410, Followers 1, Partagé 0  

В разделе "Главный контент страницы" есть таблица. При установке на страницу 1020 пикс. и более эта таблица показывается полностью. При просмотре в браузере меньше 1020 пикселей таблица обрезается и внизу появляется полоса прокрутки.

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

сайт www.открытый-юг-сочи.рф

Posté le
6 RéPONSES - 1 UTILES
Pavel M.
Pavel M.
User

Возможно, в шаблоне нужно отрегулировать минимальную высоту страницы под каждое разрешение

Lire plus
Posté le de Pavel M.
Pavel M.
Pavel M.
User
Pavel M.
Возможно, в шаблоне нужно отрегулировать минимальную высоту страницы под каждое разрешение

извините, не туда написал :)

Lire plus
Posté le de Pavel M.
Alexander C.
Alexander C.
User
Auteur

Спасибо, Павел. С этим кодом таблица сжимается, но размер контента таблицы-текст и картинки остаются неизменными.

Lire plus
Posté le de Alexander C.
Pavel M.
Pavel M.
User

есть другой вариант, но тут столбцы переносятся друг под друга, не везде это уместно

пример http://вашбухгалтер24.онлайн/buhgalterskie-uslugi.html

для страницы с таблицей в графе Эксперт вставляете этот код перед закрывающим тэгом Head

<style>
@media screen and (max-width:1200px) {
table {
width: 100% !important;
}
tr {
display: table;
width: 100%;
margin-bottom: 5px;
box-sizing: border-box;
}
tr td {
display: table-row;
width: 100%;
}
tr td > div {
display: table-cell;
vertical-align: middle;
}
}
</style>
<script>
$(document).ready(function() {
$("td").wrapInner('<div></div>');
})
</script>

Lire plus
Posté le de Pavel M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT
Alexander C.
... ... ... ...  Как сделпать, чтобы таблица показывалась полностью на смартфоне , планшете и пк? Как сделать таблицу адаптивной? Как сделать, чтобы ячейки таблицы становились меньше - пропорционально окну пользователя, а контент ячейки переносился по словам? сайт www.открытый-юг-сочи.рф

Внимание, горизонтальная прокрутка LINK www.открытый-юг-сочи.рф не зависит от таблицы, а из-за того, что сайт «не реагирует».
Сначала вам нужно сделать сайт отзывчивым, а затем вы можете проверить таблицу (эластичный) с помощью этого дополнительного кода, который будет включен в раздел ЭКСПЕРТ | Перед закрытием TAG </ HEAD>:

<style> table, table img{width:100% !important;} table {word-break: break-word ;} td {min-width: 25px} </style>

(IT > RU) Attenzione, lo scroll orizzontale del LINK www.открытый-юг-сочи.рф non dipende dalla tabella, ma dal fatto che il sito "non è responsive".
Prima bisogna rendere il sito responsive, e poi si potrà controllare la tabella (elastica) con questo codice extra, da inserire nella sezione ESPERTO | Prima della chiusura del TAG </HEAD>: ***

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪