Модель таблицы CSS основана на модели таблицы HTML
http://www.w3.org/TR/CSS21/tables.html
Таблица разделена на строки, и каждая строка содержит одну или несколько ячеек. Клетки - это дети рядов, они НИКОГДА не являются детьми столбцов.
«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 «column» не содержит никакого содержимого - стандарт не допускает содержимое непосредственно в столбцах):
.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 - это еще более узкая спецификация, но это первый шаг поиска, который имеет самое большое значение, поэтому он обычно не стоит путаницы, и дополнительный процесс анализа того, будет ли он всегда прямым потомком , о добавлении дочернего селектора >.)
Ключевой момент для снижения производительности заключается в том, что последний элемент в селекторе должен быть как можно более конкретным и никогда не должен быть *.