Il modello di tabella CSS si basa sul modello di tabella HTML
http://www.w3.org/TR/CSS21/tables.html
Una tabella è divisa in RIGHE e ogni riga contiene una o più celle. Le celle sono figlie di RIGHE, non sono MAI figlie di colonne.
"display: table-column" NON fornisce un meccanismo per creare layout a colonne (es. pagine di giornale con più colonne, dove il contenuto può fluire da una colonna all'altra).
Piuttosto, "tabella-colonna" imposta SOLO gli attributi che si applicano alle celle corrispondenti all'interno delle righe di una tabella. Ad esempio "Il colore di sfondo della prima cella di ogni riga è verde" può essere descritto.
La tabella stessa è sempre strutturata nello stesso modo in cui è in HTML.
In HTML (osserva che "td" sono all'interno di "tr", NON all'interno di "col"):
<table ..>
<col .. />
<col .. />
<tr ..>
<td ..></td>
<td ..></td>
</tr>
<tr ..>
<td ..></td>
<td ..></td>
</tr>
</table>
HTML corrispondente utilizzando le proprietà della tabella CSS (Nota che i div "colonna" non contengono alcun contenuto - lo standard non consente i contenuti direttamente nelle colonne):
.mytable {
display: table;
}
.myrow {
display: table-row;
}
.mycell {
display: table-cell;
}
.column1 {
display: table-column;
background-color: green;
}
.column2 {
display: table-column;
}
<div class="mytable">
<div class="column1"></div>
<div class="column2"></div>
<div class="myrow">
<div class="mycell">contents of first cell in row 1</div>
<div class="mycell">contents of second cell in row 1</div>
</div>
<div class="myrow">
<div class="mycell">contents of first cell in row 2</div>
<div class="mycell">contents of second cell in row 2</div>
</div>
</div>
FACOLTATIVO : sia le "righe" che le "colonne" possono essere stilizzate assegnando più classi a ogni riga e cella come segue. Questo approccio offre la massima flessibilità nello specificare vari set di celle, o singole celle, a cui applicare lo stile:
//Useful css declarations, depending on what you want to affect, include:
.mycell {
}
.row1 {
}
.row1 .mycell {
}
.row1 .cell1 {
}
.cell1 {
}
.mytable .row1 {
}
.mytable .row1 .mycell {
}
.mytable .row1 .cell1 {
}
.mytable .cell1 {
}
<div class="mytable">
<div class="column1"></div>
<div class="column2"></div>
<div class="myrow row1">
<div class="mycell cell1">contents of first cell in row 1</div>
<div class="mycell cell2">contents of second cell in row 1</div>
</div>
<div class="myrow row2">
<div class="mycell cell1">contents of first cell in row 2</div>
<div class="mycell cell2">contents of second cell in row 2</div>
</div>
</div>
Nei progetti flessibili odierni, che vengono utilizzati <div>
per molteplici scopi, è saggio mettere un po 'di classe su ogni div, per fare riferimento ad esso. Qui, quello che era <tr>
in HTML è diventato class myrow
e è <td>
diventato class mycell
. Questa convenzione è ciò che rende utili i suddetti selettori CSS.
NOTA SULLE PRESTAZIONI : mettere i nomi delle classi su ogni cella e usare i selettori multi-classe di cui sopra, è una prestazione migliore rispetto all'uso dei selettori che terminano con *
, come .row1 *
o anche .row1 > *
. Il motivo è che i selettori vengono abbinati per ultimi per primi , quindi quando vengono cercati elementi corrispondenti, .row1 *
prima lo fa *
, che corrisponde a tutti gli elementi, quindi controlla tutti gli antenati di ogni elemento , per trovare se un antenato ha class row1
. Questo potrebbe essere lento in un documento complesso su un dispositivo lento. .row1 > *
è meglio, perché viene esaminato solo il genitore diretto. Ma è ancora molto meglio eliminare immediatamente la maggior parte degli elementi, tramite .row1 .cell1
. (.row1 > .cell1
è una specifica ancora più rigorosa, ma è il primo passo della ricerca che fa la differenza più grande, quindi di solito non vale la pena, e il processo di riflessione extra sul fatto che sarà sempre un figlio diretto, di aggiungere il selettore figlio >
.)
Il punto chiave per togliere la performance è che l' ultimo elemento in un selettore dovrebbe essere il più specifico possibile e non dovrebbe mai esserlo *
.