Як повинен працювати CSS “display: table-column”?

Question 1

З огляду на наступні 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>

Question 2

Модель таблиці CSS базується на моделі таблиці HTML http://www.w3.org/TR/CSS21/tables.html

Таблиця розділена на РЯДКИ, і кожен рядок містить одну або кілька комірок. Клітинки є дітьми РЯДКІВ, вони НІКОЛИ не є дітьми колон.

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

Швидше, "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 - тобто невидимий елемент, ширина якого * регулює ширину відповідного фізичного стовпця таблиці, що вкладає.

Докладніше про модель таблиці CSS див. У стандарті W3C .

* І кілька інших властивостей, таких як межі, фони.