WebSite X5Help Center

 
Roberto N.
Roberto N.
User

Oggetto Tabella non è responsive ?  it

Autor: Roberto N.
Visitado 1167, Seguidores 3, Compartilhado 0  

Buongiorno, Oggi ho utilizzato l'oggetto Tabella ma risulta NON responsive (Link esempio) !

Come posso rendere la tabella responsive in modo che si ridimensioni in base alla larghezza della pagina ?

Publicado em
12 RESPOSTAS - 1 CORRIGIR
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... vedendo adesso la tua tabella, attualmente priva di contenuti, potresti accomodare con il mio codice in questo modo, che taglia le parole sotto ai 640 pixel...

<style>
@media(max-width:1149px) {
#imCell_131 div {overflow: hidden !important }
table {word-break:break-word;width:100% !important;}}
@media(max-width:639px) {
table {word-break:break-all;}}
</style>

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Roberto N.
Roberto N.
User
Autor

Grazie mille KolAsim,  il tuo suggerimento sembra funzionare ho provato in entambi i modi il comportamento mi sembra ugaule... 

... oppure, nel pannello ESPERTO, sezione prima della chiusura di /HEAD, delle proprietà pagina al Passo_2,  puoi inserire classi e stili  racchiusi nel TAG STYLE...

<style>
@media(max-width:1149px) {
#imCell_131 div {overflow: hidden !important }
table {word-break:break-word;width:100% !important;}}
@media(max-width:639px) {
table {word-break:break-all;}}
</style>
<script> $( document ).ready(function() { $("table").css("width", "");}); </script>

Ler mais
Publicado em de Roberto N.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Roberto N.
... ...  nel pannello ESPERTO, sezione prima della chiusura di /HEAD, delle proprietà pagina al Passo_2,  puoi inserire classi e stili  racchiusi nel TAG STYLE... ... ... 

... sì, esattamente qui:

>> Passo 3 - Mappa > Proprietà Pagina > Sezione Esperto | Codice personalizzato: (3°) > Prima della chiusura del tag HEAD

... a seconda dei casi e necessità eventualmente si può anche regolare in modo differente il punto font e/o la larghezza delle colonne...

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Roberto N.
Roberto N.
User
Autor

Come posso ovviare alla troncatura delle parole nelle risoluzione schemo più basse ?

Ler mais
Publicado em de Roberto N.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... dipende dalla parola "e-Commerce" troppo lunga, e dal codice che taglia le parole lunghe "break-all;"...

... prova questa variante, senza taglio, e con font con punto ridotto (12) e (10) nelle risoluzioni inferiori...

<style>
@media(max-width:1149px) {
#imCell_131 div {overflow: hidden !important }
table {word-break:break-word;width:100% !important;}}
@media(max-width:599px) {
table *{font-size:12px !important;}}
@media(max-width:479px) {
table *{font-size:10px !important;}
#imCell_131,#imCell_131 div { padding:0px !important; margin:0px !important;width:100% !important}}
</style>

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Roberto N.
Roberto N.
User
Autor

Grazie Esse Di e KolAsim domani con calma provo le due soluzione !

Ler mais
Publicado em de Roberto N.
Roberto N.
Roberto N.
User
Autor

Ho provato entrambi i codici e funzionano correttamente, l'unica accortezza è stata di sostituire nel codice l'Identificativo dell'oggetto con l'ID del mio oggetto !

<style>
/* CSS per rendere responsive una tabella X5 *//* rende elastica la tabella con àncora tab01  */
#imTableObject_107_131 div table {
/* adatta la larghezza della tabella al contenitore */
width: auto !important;/* manda a capo le parole troppo lunghe  */
word-break: break-word;
}/* elimina la barra di scroll orizzontale */
div #imTableObject_107_131 {
overflow-x :hidden !important;
} </style>

Grazie mille ad entrambi per le soluzioni date !

Ler mais
Publicado em de Roberto N.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... OK OK... verificato anche sul mio smartphone...

ciao

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Esse Di
Esse Di
User
Roberto N.
Ho provato entrambi i codici e funzionano correttamente, l'unica accortezza è stata di sostituire nel codice l'Identificativo dell'oggetto con l'ID del mio oggetto ! <style> /* CSS per rendere responsive una tabella X5 *//* rende elastica la tabella con àncora tab01  */ #imTableObject_107_131 div table { /* adatta la larghezza della tabella al contenitore */ width: auto !important;/* manda a capo le parole troppo lunghe  */ word-break: break-word; }/* elimina la barra di scroll orizzontale */ div #imTableObject_107_131 { overflow-x :hidden !important; } </style> Grazie mille ad entrambi per le soluzioni date !

Assolutamento sbagliato.

Il mio codice serve proprio ad evitare il riferimento all'ID dell'oggetto tabella.

Evidentemente non hai letto bene le istruzioni riportate sotto alla tabella. Devi assegnare alla tabella un'àncora con nome tab01

Ler mais
Publicado em de Esse Di
Roberto N.
Roberto N.
User
Autor

ciao Esse Di, ho riprovato il tuo codice mettemto l'ancora e funziona correttamente !

Ler mais
Publicado em de Roberto N.