WebSite X5Help Center

 
Roberto N.
Roberto N.
User

Oggetto Tabella non è responsive ?  it

Autore: Roberto N.
Visite 896, Followers 3, Condiviso 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 ?

Postato il
12 RISPOSTE - 1 CORRETTO
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

... 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>

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Roberto N.
Roberto N.
User
Autore

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>

Leggi di più
Postato il da Roberto N.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT
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...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Roberto N.
Roberto N.
User
Autore

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

Leggi di più
Postato il da Roberto N.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

... 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>

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Roberto N.
Roberto N.
User
Autore

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

Leggi di più
Postato il da Roberto N.
Roberto N.
Roberto N.
User
Autore

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 !

Leggi di più
Postato il da Roberto N.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

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

ciao

.

Leggi di più
Postato il da  ‪ 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

Leggi di più
Postato il da Esse Di
Roberto N.
Roberto N.
User
Autore

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

Leggi di più
Postato il da Roberto N.