WebSite X5Help Center

 
Bruno Serrani
Bruno Serrani
User

Responsive con la tabella non va bene  it

Autore: Bruno Serrani
Visite 1097, Followers 3, Condiviso 0  

salve a tutti, come posso fare in modo che la tabella che ho inserito si veda in modo corretto sul cellulare ?  se inserisco il testo con l'opzione responsive tutto è perfetto . Se invece inserisco una tabella sul cellulare non va bene ed è necessario scorrere laterlamente per vedere tutti i dati che inserito. Grazie in anticipo

Postato il
25 RISPOSTE - 5 UTILI
Mirko Boschetti
Mirko Boschetti
Moderator

per le tabelle, è sempre stato cosi...wink

Leggi di più
Postato il da Mirko Boschetti
Fabio C.
Fabio C.
User

Se vuoi provare in oggetto HTML inserisci questo:

<table class="responsive">

<thead>
<tr >
<th>HEAD 1</th>
<th>HEAD 2</th>
<th>HEAD 3</th>
</tr >
</thead>

<tbody>
<tr>
<td>Cella 1</td>
<td>Cella 1</td>
<td>Cella 1</td>
</tr>
<tr>
<td>Cella 2</td>
<td>Cella 2</td>
<td>Cella 2</td>
</tr>

<tr>
<td>Cella 3</td>
<td>Cella 3</td>
<td>Cella 3</td>
</tr>

</tbody>

</table>

Mentre nella sezione esperto dell'oggetto HTML:

.responsive {
border-collapse:collapse;
border-spacing:0;
margin:0 auto 40px;
}

@media screen and (min-width:800px){
.responsive {width: 80%;}

.responsive thead th {
height:50px;
line-height:50px;
border:1px solid #ddd;
background: navy;
color:#fff;
}

.responsive tbody td {
height:40px;
line-height:40px;
border:1px solid #ddd;
}
}

@media screen and (max-width:799px) {
.responsive, thead, tbody, th, tr, td {display: block;}

.responsive {width:90%;}
}

@media screen and (max-width:799px) {

.responsive td:before {
position: absolute;
top: 0;
left: 5px;
padding-right: 0;
white-space: nowrap;
width:100%;
}

.responsive tbody td {
border: none;
border-bottom: 1px solid #ddd;
position: relative;
text-align: left;
height:30px;
line-height:30px;
padding-left: 70%;
}

.responsive td:nth-of-type(1):before { content: "HEAD 1"; }
.responsive td:nth-of-type(2):before { content: "HEAD 2"; }
.responsive td:nth-of-type(3):before { content: "HEAD 3"; }
}

Questo esempio è formato da 3 righe e 3 celle facilmente individuabili per aumentare o diminuire righe/celle

Leggi di più
Postato il da Fabio C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

1) ... come suggerito da Claudio, semplice, immediato e da preferire, ... ed il LINK ovviamente permetterebbe di valutare la situazione reale per eventuali peronalizzazioni;
2) ... in formato grafico, semplicissimo, compatibilmente con il ridimensionamento, (o in PDF!);
3) ... extra in formato codice HTML, tipo Patrizia;
4) ... fin quando possibile, semplicissimo, usare le normali celle (max12 oriz.) della struttura della pagina a mo di tabella;
5) ... extra >> https://codepen.io/team/css-tricks/pen/wXgJww?editors=1100
6) ... ecc.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Esse Di
Esse Di
User

Io utilizzo questo sistema, che fa uso solo di CSS


<style>
/* CSS per tabella elastica */

table {
word-wrap: break-word;
width: auto !important;
}

</style>

Il suddetto codice vale per tutte le tabelle della pagina

Se nella pagina è presente più di una tabella e volessi renderne elastica solo una, attribuisco un'àncora alla tabella (es: tab01) ed inserisco il codice seguente

<style>
/* CSS per tabella elastica */

#tab01 ~ div div table {
word-wrap: break-word;
width: auto !important;
}

</style>

PS
Qualcuno sa come eliminare la barra di scroll orizzontale che, pur se non operativa, è presente in controluce?

Leggi di più
Postato il da Esse Di
Mirko Boschetti
Mirko Boschetti
Moderator
Esse Di
PS Qualcuno sa come eliminare la barra di scroll orizzontale che, pur se non operativa, è presente in controluce?

io di solito uso questo:

<style>
body, html {overflow-x:hidden;}
</style>

Leggi di più
Postato il da Mirko Boschetti
Mirko Boschetti
Mirko Boschetti
Moderator
Mirko Boschetti
io di solito uso questo: <style> body, html {overflow-x:hidden;} </style>

...........come non detto....non funzia per la tabella...

Leggi di più
Postato il da Mirko Boschetti
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT
Esse Di

Io utilizzo questo sistema, che fa uso solo di CSS


... ... 

[/quote

... sì, anche io ho usato e suggerito diverse alternative simili, a seconda dei casi...

... per lo scroll devi individuare lo ID della cella cantenitore;...per esempio vedi qui:

>>  https://helpcenter.websitex5.com/it/post/216026

#imCell_X div {overflow-x: hidden !important;}

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT
Esse Di
Io utilizzo questo sistema, che fa uso solo di CSS ... ... ... 

... sì, anche io ho usato e suggerito diverse alternative simili, a seconda dei casi...

... per lo scroll devi individuare lo ID della cella contenitore; ...per esempio vedi qui:      https://helpcenter.websitex5.com/it/post/216026

#imCell_X div {overflow-x: hidden !important;}

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Mirko Boschetti
Mirko Boschetti
Moderator

ok trovato....

aggiungere al codice anche

<style>#imTableObject_4_02 {overflow-x: hidden !important;}</style>

ricavando il numero di oggetto della tabella...wink

Leggi di più
Postato il da Mirko Boschetti
Mirko Boschetti
Mirko Boschetti
Moderator

opppppssssss......non avevo aggiornato....embarassed

Leggi di più
Postato il da Mirko Boschetti
Esse Di
Esse Di
User
Esse Di
PS Qualcuno sa come eliminare la barra di scroll orizzontale che, pur se non operativa, è presente in controluce?

Mi rispondo da me. Utilizzando il codice con l'àncora, occorre inserire quest'altra regola

#tab01 ~ div {
overflow-x :hidden !important;
}

Quindi il codice completo diventa


<style>
/* CSS per tabella elastica */

#tab01 ~ div {
overflow-x: hidden !important;
}

#tab01 ~ div div table {
word-wrap: break-word;
width: auto !important;
}

</style>

Leggi di più
Postato il da Esse Di
Esse Di
Esse Di
User

Devo fare ammenda.
È vero che qualche volta ho utilizzato il mio codice e funzionava. Ma non avevo parole lunghe, che dovevano andare a capo.


Adesso ho provato ad inserire una parola lunga in una cella della tabella e mi sono accorto che la parola non va a capo e la colonna che la contiene non viene ridimensionata


Al contrario, regolando la dimensione della tabella con lo script di Kolasim, tutto va bene: le parole lunghe vanno a capo e le relative colonne vengono ridimensionate

Conclusione: lasciate perdere il mio codice e utilizzate quello di Kolasim

Leggi di più
Postato il da Esse Di
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT
Esse Di
... ... Conclusione: lasciate perdere il mio codice e utilizzate quello di Kolasim

... invece può tornar utile anche il tuo codice...
... per il ritorno a capo, anche se certe volte potrebbe non apparire elegante, ed a seconda dei casi, invece di:
word-wrap: break-word;
prova con: 
word-break: break-all;     ... che spezza le stringhe continue...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Esse Di
Esse Di
User
 ‪ KolAsim ‪ ‪
Esse Di ... ... Conclusione: lasciate perdere il mio codice e utilizzate quello di Kolasim ... invece può tornar utile anche il tuo codice... ... per il ritorno a capo, anche se certe volte potrebbe non apparire elegante, ed a seconda dei casi, invece di: word-wrap: break-word; prova con:  word-break: break-all;     ... che spezza le stringhe continue... .

Purtroppo non è così.

Non è il word-wrap che non funziona.

Il problema è che il CSS

table {width: auto !important;}

non ottiene lo stesso risultato dello script

<script> $( document ).ready(function() { $("table").css("width", "");}); </script>

Le mie attuali conoscenze non mi permettono di scoprirne il motivo. Per il futuro non dispero.

Il tuo script sembra funzionare anche con il più canonico  "width", "auto", ma a questo punto non vorrei incorrere in un altro abbaglio e quindi lo lascerei così come è 

Leggi di più
Postato il da Esse Di
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

... lo script jQ si attiva dopo il download della pagina, quindi prevale sul codice precedente della pagina...
... adesso non ho guardato, ma credo che il tag table usi lo style in linea, quindi annullerebbe la dichiarazione style extra in /HEAD durante la lettura della pagina...
... visto che il CSS viene letto a cascata, anche se alcuni possono  storcere il naso, ma è innocuo e possibile, si potrebbe spostare il tag style extra in fondo alla pagina, prima della chiusura del body...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Esse Di
Esse Di
User
 ‪ KolAsim ‪ ‪
... lo script jQ si attiva dopo il download della pagina, quindi prevale sul codice precedente della pagina... ... adesso non ho guardato, ma credo che il tag table usi lo style in linea, quindi annullerebbe la dichiarazione extra in /HEAD durante la lettura della pagina... ... visto che il CSS viene letto a cascata, anche se alcuni possono  storcere il naso, ma è innocuo e possibile, si potrebbe spostare il tag style extra in fondo alla pagina, prima della chiusura del body... .

A parte che !important dovrebbe avere precedenza anche sullo style in linea, ho effettuato anche questa prova, ma il risultato è sempre lo stesso

Leggi di più
Postato il da Esse Di
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT
Esse Di
 ... ...  A parte che !important dovrebbe avere precedenza anche sullo style in linea, ... ...

... penso che hai ragione tu sul peso o priorità del codice...

... in questo modo dovrebbe funzionare come al solito direttamente in /HEAD:
<style>
table {
word-wrap: break-word;
width: 100% !important;
}
</style>

.... ....
... width: 100% !important;  ... invece di  width: auto !important; 

... è stato utile approfondire...

.

ciao

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Esse Di
Esse Di
User

Non sono più davanti al PC, ma domani mattina proverò questa ulteriore soluzione 

Leggi di più
Postato il da Esse Di
Esse Di
Esse Di
User
‪ KolAsim ‪ ‪
... in questo modo dovrebbe funzionare come al solito direttamente in /HEAD: <style> table { word-wrap: break-word; width: 100% !important; } </style> .... .... ... width: 100% !important;  ... invece di  width: auto !important;  ... è stato utile approfondire... . ciao .

Niente da fare. Ho provato a sostituire "auto" con 100%, ho provato ad inserire word-wrap: break-word anche per td e th, ma il risultato non cambia.

Leggi di più
Postato il da Esse Di
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

... forse ci sfugge qualcosa; ...se riesci a postare un esempio forse si potrebbe valutare del problema...
... non avendo riferimenti ho simulato nella stessa  tabella "Info & Conyatti" del Topic che avevo indicato prima, ove ho visto che non è stato ancora applicato il codice, ... e pare che potesse funzionare in ambedue le posizioni, /head e /body...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Esse Di
Esse Di
User

Per prima cosa un doveroso ringraziamento a Kolasim, che mi ha sopportato, nonché supportato, in questi miei tentativi 

Ho scoperto di commettere un colossale (imperdonabile?) errore

Invece di utilizzare

  word-break: break-all;

utilizzavo 

  word-wrap: break-word;

come fra l'altro era riportato nel mio post

Corretto l'errore, il codice funziona come dovrebbe.

Nell'ipotesi di assegnare un'àncora alla tabella (soluzione da me preferita per varie ragioni), ad esempio tab01, il mio codice corretto diventa


<style>
  #tab01 ~ div div table {
    width: auto !important;
    word-break: break-all;
  }

  #tab01 ~ div {
    overflow-x :hidden !important;
  }

</style>

Sembra funzionare

A breve includerò un esempio nel mio sito di prova

Leggi di più
Postato il da Esse Di
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

...  terrò da conto ... ...

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Esse Di
Esse Di
User
 ‪ KolAsim ‪ ‪
...  terrò da conto ... ...

Leggi di più
Postato il da Esse Di