CSS テーブル レイアウトで「display: table-column」が期待どおりに機能しないのはなぜですか?

CSS レイアウトで「display: table-column」が機能しないのはなぜですか?

提供された HTML と CSS コードを考えると、 2 つの列 ("colLeft" と "colRight") と 3 つの行 ("row1"、"row2"、および "row3") からなるレイアウトが表示されると予想される場合があります。ただし、Chrome や IE などのブラウザでは、レイアウト全体がゼロ サイズに折りたたまれます。

この動作は、CSS テーブル モデルの動作方法に関する根本的な誤解から生じます。 HTML テーブル モデルに似ていますが、決定的な違いがあります:

• 列は直接コンテナではありません: HTML テーブルでは、列 (​​"") は直接コンテナではありません。細胞が含まれています。代わりに、セル ("") は行 (" ") の子になります。この構造は CSS テーブル モデルで維持されます。
• 「display: table-column」はセル属性を定義します: 要素で「display: table-column」を使用しても、列は作成されません。伝統的な感覚。代わりに、テーブル行内のセルに適用される属性を設定します。たとえば、これを使用して各行の最初のセルの背景色を定義できます。
• 標準テーブル構造: テーブルの全体的な構造は HTML と同じままです。行にはセルが含まれ、列には直接コンテンツは含まれません。

正しい HTML および CSS 構造:

有効な CSS テーブル レイアウトを作成するには、次のことを行う必要があります。次の構造を使用します:

<code class="html"><div class="mytable">
  <div class="mycolumn1"></div>
  <div class="mycolumn2"></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></code>

<code class="css">.mytable {
  display: table;
}
.mycolumn1 {
  display: table-column;
  background-color: green;
}
.mycolumn2 {
  display: table-column;
  background-color: red;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}</code>

以上がCSS テーブル レイアウトで「display: table-column」が期待どおりに機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。