Как должен работать CSS-дисплей: table-column?

Учитывая следующие HTML и CSS, я абсолютно ничего не вижу в своем браузере (Chrome и IE в момент написания). Все рушится до 0x0 px. Почему?

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        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%; }
    </style>
</head>
<body>
    <section>
        <div id="colLeft">
            <div id="row1">
                <div id="cell1">
                    AAA
                </div>
            </div>
            <div id="row2">
                <div id="cell2">
                    BBB
                </div>
            </div>
        </div>
        <div id="colRight">
            <div id="row3">
                <div id="cell3">
                    CCC
                </div>
            </div>
        </div>
    </section>
</body>
</html>

Ответ 1

Модель таблицы CSS основана на модели таблицы HTML http://www.w3.org/TR/CSS21/tables.html

Таблица разделена на ROWS, и каждая строка содержит одну или несколько ячеек. Ячейки являются дочерними элементами ROWS, они НИКОГДА не являются дочерними столбцами.

"display: table-column" НЕ предоставляет механизм для создания столбчатых макетов (например, газетные страницы с несколькими столбцами, где контент может перетекать из одного столбца в следующий).

Скорее, "table-column" ТОЛЬКО устанавливает атрибуты, которые применяются к соответствующим ячейкам в строках таблицы. Например. "Цвет фона первой ячейки в каждой строке зеленый" можно описать.

Сама таблица всегда структурирована так же, как и в HTML.

В HTML (обратите внимание, что "td" находятся внутри "tr" s, а не внутри "col" ):

<table ..>
  <col .. />
  <col .. />
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
</table>

Соответствующий HTML с использованием свойств таблицы CSS (обратите внимание, что в "div" столбца не содержится никакого содержимого - стандарт не разрешает содержимое непосредственно в столбцах):

.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>

Ответ 2

Тип отображения "table-column" означает, что он действует как тег <col> в HTML - то есть невидимый элемент, ширина которого * определяет ширину соответствующего физического столбца таблицы окружения.

Для получения дополнительной информации о модели таблицы CSS см. стандарт W3C.

* И еще несколько свойств, таких как границы, фоны.