WebSite X5Help Center

 
Alex Studio-f26
Alex Studio-f26
User

таблица, адаптивность к монитору  ru

Auteur : Alex Studio-f26
Visité 930, Followers 2, Partagé 0  

Добрый день!

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

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

Таблица должна стать под размер монитора, а контент внутри таблицы должен умещаться в ячейку таблицы, пусть даже с уменьшением шрифта и переносом на другую строку.

Из-за того что таблица не адаптируется, лично мне непонятно зачем она тогда вообще нужна!?

Спасибо за понимание и я надеюсь на скорое решение этой проблемы!

Posté le
4 RéPONSES - 2 UTILE
Pavel M.
Pavel M.
User

Как вы хотите, не порекомендую, а вот как в примере https://pereezd-profi.msk.ru/upakovka.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.
Vlad S.
Vlad S.
User

Может этот подойдет

<style type="text/css"> table {width:auto !important} </style>

Lire plus
Posté le de Vlad S.
Alex Studio-f26
Alex Studio-f26
User
Auteur

Ребята....огромное Вам человеческое спасибо...забыл про режим эксперт в свойствах :(

Lire plus
Posté le de Alex Studio-f26
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

Страница свойств | Эксперт | (/) HEAD, для страницы «eko-vizitki.php»

(IT > RU) - Proprietà Pagina | Esperto | (/)HEADper la pagina "eko-vizitki.php"

<style>
table {word-break: break-word;}
#imTableObject_40_04 {overflow:hidden;}
@media (max-width: 479px) {
#imCell_4 { display: block !important;}
table *{font-size:3vw !important}}
</style>
<script> $( document ).ready(function() { $("table").css("width", "");}); </script>

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪