CSS "display: table-column" はどのように機能しますか?

HTML では、テーブルは行で構成され、各行は細胞が含まれているもの。 CSS はこの概念を拡張し、デザイナーが特定の行と列のレイアウトを定義できるようにします。 「display: table-row」と「display: table-cell」は単純ですが、「display: table-column」にはより微妙な目的があります。

「display: table-」の機能を理解するcolumn"

"display: table-row" や "display: table-cell" とは異なり、"display: table-column" は新しい列構造を確立しません。代わりに、既存のテーブル行内のセルの属性を設定します。たとえば、各行の最初のセルの背景色を指定できます。

HTML と CSS のテーブル構造

この概念を理解するには、次の HTML を考慮してください。テーブル:

Cell 1
    
Cell 2
  
Cell 3
    
Cell 4
  

HTML 構造に対応して、次の CSS を適用できます:

.mytable {
  display: table;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
}

この例では、「.column1」と「.column2」の div はコンテンツのコンテナーではありません。これらは単にテーブル行内のセルの属性を定義するだけです。

覚えておくべき重要なポイント

• "display: table-column" はテーブル行内のセルの属性を設定します、列自体ではありません。
• 基礎となるテーブル構造は HTML と同じままで、セルは行の子になります。
• 「display: table-column」は複数のテーブルのメカニズムを提供しません。 - 列レイアウト。コンテンツが列間を流れます。