CSS「display: table-column」の目的と構造は何ですか?

CSS "display: table-column" の説明

Web 開発では、"display: table-column" プロパティがよく誤解されます。これは、HTML テーブル モデルに基づいた CSS テーブル モデル内で動作することを目的としています。

CSS テーブル モデル

CSS テーブル モデル内のテーブルは分割されています行と列に分割され、セルは行内の特定の位置を占めます。ただし、HTML テーブルとは異なり、「display: table-column」ではコンテンツを列内に直接配置できません。

「display: table-column」の目的

「display: table-column」の主な目的は、「display: table-cell」プロパティの場合と同様に、表のセルの属性を設定することです。たとえば、各行の最初のセルの背景色を定義できます。

列の構造

HTML では、列はセルのコンテナではありません。セルは行内に配置されます。同じ構造が CSS テーブル モデルにも適用されます。例:

<code class="HTML"><table>
  <tr>
    <td>Column 1 Content</td>
    <td>Column 2 Content</td>
  </tr>
</table></code>

CSS テーブル表現

CSS テーブル プロパティを使用して同様のレイアウトを実現するには:

<code class="CSS">.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
}
.col-1 {
  display: table-column;
  background-color: green;
}
.col-2 {
  display: table-column;
}</code>

<code class="HTML"><div class="table">
  <div class="col-1"></div>
  <div class="col-2"></div>
  <div class="row">
    <div class="cell">Column 1 Content</div>
    <div class="cell">Column 2 Content</div>
  </div>
</div></code>

Inこのシナリオでは、「col-1」と「col-2」の div はテーブルの列を表しますが、直接のコンテンツは含まれません。コンテンツは行内に配置されます。

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