Com’è ansible che un “display” CSS: tabella-colonna “funzioni?

Dato il seguente codice HTML e CSS, non vedo assolutamente nulla nel mio browser (Chrome e IE più recenti al momento della scrittura). Tutto crolla a 0x0 px. Perché?

    section { display: table; height: 100%; background-color: grey; } #colLeft { display: table-column; height: 100%; background-color: green; } #colRight { display: table-column; height: 100%; background-color: red; } #row1 { display: table-row; height: 100%; } #row2 { display: table-row; height: 100%; } #row3 { display: table-row; height: 100%; } #cell1 { display: table-cell; height: 100%; } #cell2 { display: table-cell; height: 100%; } #cell3 { display: table-cell; height: 100%; }    
AAA
BBB
CCC

Il modello di tabella CSS è basato sul modello di tabella HTML http://www.w3.org/TR/CSS21/tables.html

Una tabella è divisa in ROWS e ogni riga contiene una o più celle. Le celle sono figli di ROWS, non sono MAI figli di colonne.

“display: table-column” NON fornisce un meccanismo per creare layout a colonne (ad es. pagine di giornali con più colonne, in cui il contenuto può scorrere 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 es. “Il colore di sfondo della prima cella di ogni riga è verde” può essere descritto.

Il tavolo stesso è sempre strutturato nello stesso modo in cui è in HTML.

In HTML (osserva che “td” s sono dentro “tr” s, NON dentro “col” s):

 

HTML corrispondente utilizzando le proprietà della tabella CSS (si noti che le div “colonne” non contengono alcun contenuto – lo standard non consente il contenuto 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; } 
 
contents of first cell in row 1
contents of second cell in row 1
contents of first cell in row 2
contents of second cell in row 2

Il tipo di visualizzazione “tabella-colonna” significa che agisce come il tag

in HTML – cioè un elemento invisibile la cui larghezza * governa la larghezza della corrispondente colonna fisica della tabella allegata.

Vedere lo standard W3C per ulteriori informazioni sul modello di tabella CSS.

* E alcune altre proprietà come bordi, sfondi.