Как должен работать CSS «display: table-column»?

Question 1

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

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

Question 2

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

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

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

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

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

В HTML (обратите внимание, что «td» находятся внутри «tr», а НЕ внутри «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>

Развернуть фрагмент

ДОПОЛНИТЕЛЬНО : стили и «строки», и «столбцы» могут быть стилизованы путем присвоения нескольких классов каждой строке и ячейке следующим образом. Этот подход дает максимальную гибкость при указании различных наборов ячеек или отдельных ячеек для стилизации:

//Useful css declarations, depending on what you want to affect, include:

/* all cells (that have "class=mycell") */
.mycell {
}

/* class row1, wherever it is used */
.row1 {
}

/* all the cells of row1 (if you've put "class=mycell" on each cell) */
.row1 .mycell {
}

/* cell1 of row1 */
.row1 .cell1 {
}

/* cell1 of all rows */
.cell1 {
}

/* row1 inside class mytable (so can have different tables with different styles) */
.mytable .row1 {
}

/* all the cells of row1 of a mytable */
.mytable .row1 .mycell {
}

/* cell1 of row1 of a mytable */
.mytable .row1 .cell1 {
}

/* cell1 of all rows of a mytable */
.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>

Развернуть фрагмент

В сегодняшних гибких проектах, которые используются <div>для нескольких целей, разумно поместить некоторый класс в каждый div, чтобы облегчить обращение к нему. Здесь то, что раньше было <tr>в HTML, стало class myrowи <td>стало class mycell. Это соглашение и делает полезными указанные выше селекторы CSS.

ЗАМЕЧАНИЕ ПО ЭКСПЛУАТАЦИИ : размещение имен классов в каждой ячейке и использование вышеуказанных мультиклассовых селекторов дает лучшую производительность, чем использование селекторов, заканчивающихся на *, например, .row1 *или даже .row1 > *. Причина в том, что селекторы сопоставляются в первую очередь последними , поэтому при поиске совпадающих элементов .row1 *сначала выполняется поиск, *который соответствует всем элементам, а затем проверяет всех предков каждого элемента , чтобы определить, есть ли у какого-либо предка class row1. Это может быть медленным в сложном документе на медленном устройстве. .row1 > *лучше, потому что проверяется только непосредственный родитель. Но еще лучше сразу удалить большинство элементов с помощью .row1 .cell1. (.row1 > .cell1- еще более жесткая спецификация, но это первый шаг поиска, который имеет самое большое значение, поэтому обычно не стоит беспорядок и дополнительный мыслительный процесс относительно того, всегда ли он будет прямым потомком, добавлением дочерний селектор >.)

Ключевым моментом, который нужно исключить из повторной производительности, является то, что последний элемент в селекторе должен быть как можно более конкретным и никогда не должен быть таким конкретным* .

Question 3

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

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

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