Come creare: tabella reattiva

Impara come creare una tabella reattiva.

Tabella reattiva

Se lo schermo è troppo piccolo per visualizzare tutto il contenuto, la tabella reattiva mostrerà una barra di scorrimento orizzontale.

Ajusta la dimensione della finestra del browser per vedere l'effetto:

Nome Cognome Punti Punti Punti Punti Punti Punti Punti Punti Punti Punti Punti Punti Punti Punti Punti Punti Punti Punti Punti
Jill Smith 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50
Eve Jackson 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94
Adam 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 contenitore che contiene overflow-x:auto elemento contenitore:

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

Prova personalmente

Attenzione:Nella OS X Lion (sul Mac), la barra di scorrimento è nascosta per default e viene visualizzata solo quando viene utilizzata (anche se è stato impostato "overflow:scroll" o auto).

Pagine correlate

Tutorial:Tabella CSS