web-dev-qa-db-ja.com

CSS「display：table-column」はどのように機能するのですか？

次の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>
csstablelayoutcss-tables
78
Eliot

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にsomeクラスを配置して参照するのが賢明です。ここでは、HTMLで<tr>であったものがclass myrowになり、<td>がclass mycellになりました。この規則により、上記のCSSセレクターが便利になります。

PERFORMANCE NOTE：各セルにクラス名を付け、上記のマルチクラスセレクターを使用すると、*で終わるセレクターを使用するよりもパフォーマンスが向上します。 .row1 *または.row1 > *など。その理由は、セレクターが一致する最後の最初であるため、一致する要素が検索されると、.row1 *が最初に*を実行します。 all要素と一致してから、各要素のすべての祖先をチェック、祖先にclass row1があるかどうかを確認します。遅いデバイスでの複雑なドキュメントでは、これが遅くなる場合があります。 .row1 > *は、直接の親のみが検査されるため、より優れています。ただし、.row1 .cell1を使用して、ほとんどの要素をすぐに削除することをお勧めします。 （.row1 > .cell1はさらに厳密な仕様ですが、最大の違いをもたらすのは検索の最初のステップです。そのため、通常は散らかる価値がありません。直接の子、子セレクターの追加>。）

Reperformanceを取り除く重要なポイントは、lastアイテムがセレクターはできるだけ具体的である必要があり、*であってはなりません。

107
ToolmakerSteve

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

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

*そして、ボーダー、背景のような他のいくつかのプロパティ。

22
Random832