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

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

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

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

скорее, "таблица-столбец" задает только атрибуты, которые применяются к соответствующим ячейкам в строках таблицы. Например ,можно описать" цвет фона первой ячейки в каждой строке зеленый".

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

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

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

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

.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 это еще более жесткая спецификация, но это первый шаг поиска, который имеет наибольшее значение, поэтому обычно не стоит беспорядка и дополнительного мыслительного процесса о том, всегда ли это будет прямой ребенок, добавив селектор ребенка >.)

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