¿Cómo se supone que funciona un CSS “display: table-column”?

Dado el siguiente HTML y CSS, no veo absolutamente nada en mi navegador (Chrome e IE son los más recientes al momento de escribir). Todo colapsa a 0x0 px. ¿Por qué?

    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

    El modelo de tabla CSS se basa en el modelo de tabla HTML http://www.w3.org/TR/CSS21/tables.html

    Una tabla se divide en ROWS, y cada fila contiene una o más celdas. Las células son hijos de ROWS, NUNCA son hijos de columnas.

    “display: table-column” NO proporciona un mecanismo para hacer diseños en columnas (por ejemplo, páginas de periódicos con múltiples columnas, donde el contenido puede fluir de una columna a la siguiente).

    Más bien, “tabla-columna” SÓLO establece los atributos que se aplican a las celdas correspondientes dentro de las filas de una tabla. Por ejemplo, “El color de fondo de la primera celda en cada fila es verde” se puede describir.

    La tabla en sí está siempre estructurada de la misma manera que en HTML.

    En HTML (tenga en cuenta que “td” s están dentro de “tr” s, NO dentro de “col” s):

     

    HTML correspondiente utilizando las propiedades de la tabla CSS (Tenga en cuenta que los divs “columna” no contienen ningún contenido, el estándar no permite contenido directamente en columnas):

     .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

    El tipo de visualización “columna de tabla” significa que actúa como la etiqueta

    en HTML, es decir, un elemento invisible cuyo ancho * rige el ancho de la columna física correspondiente de la tabla adjunta.

    Consulte el estándar W3C para obtener más información sobre el modelo de tabla CSS.

    * Y algunas otras propiedades como bordes, fondos.