Responsive con la tabella non va bene
Author: Bruno Serrani
Visited 1347,
Followers 3,
Shared 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
Posted on the
per le tabelle, è sempre stato cosi...
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
oppure...
io utilizzo quello postato da KolAsim qui
https://helpcenter.websitex5.com/en/post/178276#comment5
...rende la tabella "elastica", l'ho modificato un pochino per le mie esigenze...
ma già così risolve il 90% dei casi...
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.
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?
io di solito uso questo:
<style>
body, html {overflow-x:hidden;}
</style>
...........come non detto....non funzia per la tabella...
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/en/post/216026
#imCell_X div {overflow-x: hidden !important;}
.
... 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/en/post/216026
#imCell_X div {overflow-x: hidden !important;}
.
ok trovato....
aggiungere al codice anche
<style>#imTableObject_4_02 {overflow-x: hidden !important;}</style>
ricavando il numero di oggetto della tabella...
opppppssssss......non avevo aggiornato....
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>
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
... 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 è
... 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...
.
A parte che !important dovrebbe avere precedenza anche sullo style in linea, ho effettuato anche questa prova, ma il risultato è sempre lo stesso
... 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
.
Non sono più davanti al PC, ma domani mattina proverò questa ulteriore soluzione
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.
... 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...
.
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
Ho riportato le mie conclusioni su come rendere responsive le tabelle di Website X5 in una pagina del mio sito di prove
http://essedi.altervista.org/_EVO2019/_prove/tabella.html
... terrò da conto ... ...