Style Guide Unibo Responsive Table
Tabelle responsive personalizzate e sviluppate appositamente per Unibo
Esistono diverse soluzioni in css e js per creare delle tabelle responsive.
Per questo pacchetto non abbiamo previsto librerie js, ma abbiamo deciso di adottare soluzioni basate sull'uso di solo css.
In generale si consiglia di scegliere la soluzione in base al tipo di tabella e di contenuto da visualizzare.
Su css-tricks.com ci sono 4 proposte, da cui abbiamo
preso spunto per sviluppare le nostre soluzioni:
La soluzione squish è il comportamento di base di una tabella senza nessuno stile applicato.
La soluzione scroll è la soluzione adottata da Foundation base visibile sulla documentazione nella sezione "Scrolling Table" .La soluzione collapse rows è sviluppata di seguito nella sezione Tabella orientata per righe.
Infine, non è possibile sviluppare la proposta collapse columns come indicata da css-tricks, senza modificare l'html.Per questo motivo, le tabelle con orientamento in colonna, hanno un comportamento differente e le intestazionin definite nel
<thed> vengono affiancate al <tbody>.
Se le colonne nel <tbody> sono maggiori rispetto allo spazio in pagina, compare lo scroll. Questa soluzione non prevede l'utilizzo di js o etichette nascoste duplicate.
Tutte le soluzioni precedenti sono ottimali nel caso siano tabelle con valori semplici.
Per tabelle più complesse si vedano le tabelle con orientamento misto.
Tabella orientata per righe
Le informazioni della tabella sono disposte per riga, quindi nel responsive le informazioni saranno visualizzate come una tabella inline.
Harry Potter
Grifondoro
Bacchetta formata da legno di Agrifoglio e un nucleo di Piuma di Fenice
Patronus Cervo
Severus Piton
Serpeverde
Bacchetta formata da betulla e crine di unicorno
Patronus Cerva
Hermione Granger
Corvonero
Bacchetta formata da vite e corda di cuore di drago
Patronus Lontra
| Harry Potter | Grifondoro | Bacchetta formata da legno di Agrifoglio e un nucleo di Piuma di Fenice | Patronus Cervo |
|---|---|---|---|
| Severus Piton | Serpeverde | Bacchetta formata da betulla e crine di unicorno | Patronus Cerva |
| Hermione Granger | Corvonero | Bacchetta formata da vite e corda di cuore di drago | Patronus Lontra |
Tabella orientata per colonne
Nella maggior parte dei casi, le informazioni delle tabelle sono disposte per colonne. In questo caso nel
responsive, il thead e il tbody vengono affiancati e sul tbody compare lo scoll
quando non c'è abbastanza spazio. Inoltre, i valori nel <td> sono sempre su una riga e non vanno mai a capo.
Harry Potter
Severus Piton
Hermione Granger
Grifondoro
Serpeverde
Corvonero
Bacchetta formata da legno di Agrifoglio e un nucleo di Piuma di Fenice
Bacchetta formata da betulla e crine di unicorno
Bacchetta formata da vite e corda di cuore di drago
Patronus Cervo
Patronus Cerva
Patronus Lontra
| Harry Potter | Severus Piton | Hermione Granger |
|---|---|---|
| Grifondoro | Serpeverde | Corvonero |
| Bacchetta formata da legno di Agrifoglio e un nucleo di Piuma di Fenice | Bacchetta formata da betulla e crine di unicorno | Bacchetta formata da vite e corda di cuore di drago |
| Patronus Cervo | Patronus Cerva | Patronus Lontra |
Tabella orientamento misto
Le informazioni della tabella sono eterogenee e vengono disposte sia per riga che per colonna.
Nel responsive i th che si trovano all'interno del thead vengono nascosti nella versione responsive
e le etichette vengono duplicate a fianco al valore.
Per poter visualizzare l'etichetta di fianco al valore è necessario duplicare la label per ogni valore dentro il td
usando <span class="data-label">.
Totale
Primo anno
Altri anni
Numero iscritti regolari
Totale
569
Primo anno
267
Altri anni
302
Numero di schede compilate
Totale
1400
Primo anno
739
Altri anni
661
Descrizione Insegnamento
Codice Corso
Corso di Studi
Data di Rilevazione
Numero dei Presenti
Scheda Individuale
Immagini Questionari
Descrizione Insegnamento
STORIA DELLA MUSICA I: MEDIOEVO E RINASCIMENTO (1)
Codice Corso
0956
Corso di Studi
DAMS - DISCIPLINE DELLE ARTI, DELLA MUSICA E DELLO SPETTACOLO
Data di Rilevazione
07/03/2017
Numero dei Presenti
4
Scheda Individuale
Non disponibile
Immagini Questionari
Schede |
PDF Completo
Descrizione Insegnamento
SEMINARIO DI MUSICA (1)
Codice Corso
0956
Corso di Studi
DAMS - DISCIPLINE DELLE ARTI, DELLA MUSICA E DELLO SPETTACOLO L
Data di Rilevazione
01/03/2017
Numero dei Presenti
13
Scheda Individuale
Resoconto
Immagini Questionari
Schede |
PDF Completo
| Totale | Primo anno | Altri anni | |
|---|---|---|---|
| Numero iscritti regolari | Totale 569 | Primo anno 267 | Altri anni 302 |
| Numero di schede compilate | Totale 1400 | Primo anno 739 | Altri anni 661 |
| Descrizione Insegnamento | Codice Corso | Corso di Studi | Data di Rilevazione | Numero dei Presenti | Scheda Individuale | Immagini Questionari |
|---|---|---|---|---|---|---|
| Descrizione Insegnamento STORIA DELLA MUSICA I: MEDIOEVO E RINASCIMENTO (1) | Codice Corso 0956 | Corso di Studi DAMS - DISCIPLINE DELLE ARTI, DELLA MUSICA E DELLO SPETTACOLO | Data di Rilevazione 07/03/2017 | Numero dei Presenti 4 | Scheda Individuale Non disponibile | Immagini Questionari Schede | PDF Completo |
| Descrizione Insegnamento SEMINARIO DI MUSICA (1) | Codice Corso 0956 | Corso di Studi DAMS - DISCIPLINE DELLE ARTI, DELLA MUSICA E DELLO SPETTACOLO L | Data di Rilevazione 01/03/2017 | Numero dei Presenti 13 | Scheda Individuale Resoconto | Immagini Questionari Schede | PDF Completo |