Come fare per - Tabelle reattive
Scopri come creare una tabella reattiva.
Tabelle reattive
Una tabella reattiva visualizzerà una barra di scorrimento orizzontale se lo schermo è troppo piccolo per visualizzare l'intero contenuto. Ridimensiona la finestra del browser per vedere l'effetto:
Nome di battesimo | Cognome | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jill | fabbro | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
vigilia | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
Adamo | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Per creare una tabella reattiva, aggiungi un elemento contenitore con overflow-x:auto
intorno alla <tabella>:
Esempio
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
Nota: in OS X Lion (su Mac), le barre di scorrimento sono nascoste per impostazione predefinita e visualizzate solo quando vengono utilizzate (anche se è impostato "overflow:scorri" o auto).
Suggerimento: vai al nostro tutorial sulle tabelle CSS per saperne di più su come applicare uno stile alle tabelle.