Oggetto Tabella non è responsive ? 
Autore: Roberto N.
Visite 1165,
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
... puoi provare con un mio vecchio escamotage che avevo iderato per la v,12, ed ancora valido, che rende la tabella ELASTICA (non responsive!) ...na adatta per la maggior parte di tabelle congrue...
... vedi per esempio qui >> https://helpcenter.websitex5.com/it/post/153534#comment6
.
... 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>
.
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>
... 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...
.
Autore
Come posso ovviare alla troncatura delle parole nelle risoluzione schemo più basse ?
... 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>
.
In questo mio esempio
http://essedi.altervista.org/_EVO2019/_prove/tabella.html
ho utilizzato solo un semplice CSS e sembra funzionare perfettamente
Autore
Grazie Esse Di e KolAsim domani con calma provo le due soluzione !
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 !
... OK OK... verificato anche sul mio smartphone...
ciao
.
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
Autore
ciao Esse Di, ho riprovato il tuo codice mettemto l'ancora e funziona correttamente !