Tabella reattiva CSS
Tabella reattiva
Una tabella reattiva visualizzerà una barra di scorrimento orizzontale se lo schermo è troppo piccolo per visualizzare l'intero contenuto:
Nome di battesimo | Cognome | 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 |
vigilia | Jackson | 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 |
Aggiungi un elemento contenitore (come <div>) con overflow-x:auto
intorno all'elemento <table> per renderlo reattivo:
Esempio
<div style="overflow-x:auto;">
<table>
... table content ...
</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:scorrimento").
Altri esempi
Questo esempio mostra come creare una tabella di fantasia.
Questo esempio mostra come posizionare la didascalia della tabella.
Proprietà della tabella CSS
Property | Description |
---|---|
border | Sets all the border properties in one declaration |
border-collapse | Specifies whether or not table borders should be collapsed |
border-spacing | Specifies the distance between the borders of adjacent cells |
caption-side | Specifies the placement of a table caption |
empty-cells | Specifies whether or not to display borders and background on empty cells in a table |
table-layout | Sets the layout algorithm to be used for a table |