CSS の「display: table-column」の本当の目的は何ですか?

CSS "display: table-column" の謎を解く

HTML と CSS のプロパティを調査すると、興味深い疑問につながることがよくあります。このようなクエリの 1 つは、謎めいた「display: table-column」宣言を使用して CSS テーブルベースのレイアウトを実装するときに発生します。その魅力にもかかわらず、このプロパティにはかなり特殊な目的があり、正しく理解していないと不可解な結果につながる可能性があります。

背景: CSS テーブル モデル

CSS テーブルモデルは、HTML テーブル モデルから多くを借用した複雑なシステムです。このモデルでは、テーブルは行と列で構成され、行と列の各交点をセルが占めます。セルは行の直接の子孫ですが、列とは直接の関係はありません。

「display: table-column」の目的

一般的な考えに反して、「 「display: table-column」プロパティでは、列形式のレイアウトを作成する方法は提供されません。その唯一の目的は、テーブル行内のセルに特に適用される属性を定義することです。言い換えれば、行内の位置に基づいて特定のセルの背景色やフォント サイズなどの特性を指定できるようになります。

ただし、テーブル構造は従来のものと同じであることに注意することが重要です。 HTML。列にはコンテンツが直接含まれません。代わりに、行内のセルのレイアウトに影響を与える論理構造としてのみ存在します。

説明例

次の HTML および CSS コードを考えてみましょう:

<code class="html"><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></code>

<code class="css">section {
  display: table;
  height: 100%;
  background-color: grey;
}

#colLeft,
#colRight {
  display: table-column;
  height: 100%;
}

#row1,
#row2,
#row3 {
  display: table-row;
  height: 100%;
}

#cell1,
#cell2,
#cell3 {
  display: table-cell;
  height: 100%;
}</code>

この例では、「display: table-column」宣言が「colLeft」要素と「colRight」要素に適用されます。これらの要素にはコンテンツは含まれません。それらの唯一の目的は、それぞれの行内のセルのレイアウトを定義することです。

これらの列定義が存在するにもかかわらず、ブラウザには何も表示されないことに気づくかもしれません。これは、前述したように、列にはコンテンツが直接含まれていないためです。コンテンツは、テーブル行の子であるテーブル セル内に配置する必要があります。

これを修正するには、コンテンツをテーブル セル内に配置するように HTML 構造を変更する必要があります。

<code class="html"><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></code>

これにより、変更すると、コンテンツが期待どおりに表示され、「display: table-column」が適切に使用されていることがわかります。

以上がCSS の「display: table-column」の本当の目的は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。