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に分割され、各行には1つ以上のセルが含まれます。セルはROWSの子であり、列の子ではありません。

「display：table-column」は、列レイアウトを作成するためのメカニズムを提供しません（たとえば、コンテンツが1つの列から次の列に流れることができる複数の列を持つ新聞ページ）。

むしろ、「table-column」は、テーブルの行内の対応するセルに適用される属性のみを設定します。たとえば、「各行の最初のセルの背景色は緑です」と説明できます。

テーブル自体は、常にHTMLと同じように構造化されています。

HTMLの場合（「td」は「col」内ではなく「tr」内にあることに注意してください）：

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

CSSテーブルプロパティを使用した対応するHTML（「列」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セレクターを便利にするものです。

PERFORMANCE注：各セルにクラス名を入れ、上記のマルチクラスセレクタを使用して、で終わるセレクタより優れた性能である*ような、.row1 *あるいはを.row1 > *。その理由は、セレクタが一致していることである最後の最初のため、整合素子が求められている場合、.row1 *最初に行い*一致する、全ての要素を、次にチェック各要素のすべての祖先を任意の祖先が持っている場合を見つけるために、class row1。これは、低速のデバイス上の複雑なドキュメントでは低速になる可能性があります。.row1 > *直接の親だけが検査されるので、より良いです。ただし、を使用してほとんどの要素をすぐに削除する方がはるかに優れてい.row1 .cell1ます。（（.row1 > .cell1はさらに厳しい仕様ですが、最大の違いを生むのは検索の最初のステップであるため、通常は雑然とした価値はなく、常に直接の子になるかどうかについての追加の思考プロセスで、子セレクター>。）

再奪うためのキーポイントのパフォーマンスはということである最後のセレクタ内の項目がある必要があり、可能な限り具体的として、かつてはいけません*。

Question 3

「table-column」表示タイプは<col>、HTMLのタグのように機能することを意味します。つまり、幅*が囲んでいるテーブルの対応する物理列の幅を制御する非表示の要素です。

CSSテーブルモデルの詳細については、W3C標準を参照してください。

*そして、境界線、背景などの他のいくつかのプロパティ。