Таблица для отображения на смартфонах и планшетах 
Автор: Alexander C.
Просмотрено 1378,
Подписчики 1,
Размещенный 0
В разделе "Главный контент страницы" есть таблица. При установке на страницу 1020 пикс. и более эта таблица показывается полностью. При просмотре в браузере меньше 1020 пикселей таблица обрезается и внизу появляется полоса прокрутки.
Как сделпать, чтобы таблица показывалась полностью на смартфоне , планшете и пк? Как сделать таблицу адаптивной? Как сделать, чтобы ячейки таблицы становились меньше - пропорционально окну пользователя, а контент ячейки переносился по словам?
Размещено
Возможно, в шаблоне нужно отрегулировать минимальную высоту страницы под каждое разрешение
извините, не туда написал :)
https://helpcenter.websitex5.com/ru/post/200395
Автор
Спасибо, Павел. С этим кодом таблица сжимается, но размер контента таблицы-текст и картинки остаются неизменными.
есть другой вариант, но тут столбцы переносятся друг под друга, не везде это уместно
пример 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>
Внимание, горизонтальная прокрутка 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
.