creare tabelle "responsive"

[vasco87]

Salve ragazzi ho un quesito da porvi..

Con i nuovi temi responsive, ho difficoltà a far visualizzare correttamente nei mobile una classica tabella html poniamo il caso di 2 righe e 2 celle.

come fare diventare una tabella "responsive" ??

[gioso]

L'importante è che non utilizzi tag che costringano ad una dimensione predefinita delle colonne.
Insomma, se visualizzi il codice dell'articolo, la tabella dovrebbe cominciare con

Codice: [Seleziona]

<table>
o al massimo

Codice: [Seleziona]

<table border="2">
(puoi modicare la dimensione del bordo).
Sul mio template responsive tutto funziona correttamente.
Se invece imposti da codice la dimensione delle colonne, il template non riesce ad adattarla correttamente e quindi sfora...

Prova un po' a vedere.

[Murphz]

Nuovi temi responsive e tabelle fa sorridere comunque, purtroppo, a 11 o 12 anni dalla loro scomparsa dal mainstream, sono ancora lì.


Ad ogni modo, quello che farei io è inserirle in un div (anche via javascript se non hai la possibilità) che ha il 100% e overflow, in questo modo la tabella segue e non da problemi. Chiaramente le dimensioni delle colonne non dovranno essere predefinite, come ti ha detto gioso.

[giovi]

una tabella non può essere responsive! Tuttalpiù puoi renderla fluida utilizzando la metrica percentuale ma responsive.. mai! E' un po, come suggerisce Murphz, come tentare di rendere digitale un aratro!

Una soluzione (totalmente improvvisata) può essere l'utilizzo di un div per ogni cella così come avviene nei layout table-less. Dal momento che ci sono più modi per rendere un layout a divs responsive, ci sono più modi per fare la stessa cosa con la tabella. Puoi ad esempio inserire ogni riga in un diverso div/span o inserire un div di clear alla fine di ogni riga. Prova!

[Murphz]

una tabella non può essere responsive! Tuttalpiù puoi renderla fluida utilizzando la metrica percentuale ma responsive.. mai!

In realtà si, può diventare responsive, e spesso succede perchè molti preferiscono tabellare con <table> più che con serie di div e span, come hai giustamente suggerito e come consiglio sempre anche io. Questo sopratutto nel mondo mobile.


Le tecniche sono varie per rendere responsive una tabella, a seconda dell'ambiente e di vari altri fattori, ma è comunque possibile...purtroppo


http://jquerymobile.com/demos/1.3.0-beta.1/docs/tables/table-reflow.html
http://zurb.com/playground/responsive-tables

[giovi]

La differenza però con i div è che non puoi non ricorrere a meccanismi di re-impaginazione dinamica come jQuery!
Es. http://semantic.gs/
 
Hai capito tu comunque.. di questo passo domani toccherà veder girare bighe con l'autoradio ed il gps!

[Murphz]

[size=78%]Hai capito tu comunque.. di questo passo domani toccherà veder girare bighe con l'autoradio ed il gps![/size]

azz, non chiamartela buona giornata!