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

CSS における "display: table-column" の役割

この記事では、"display: table-column" がどのように機能するかを見ていきます。

CSS テーブル モデルは HTML テーブル モデルと一致します。ここで、行とセルは基本的なコンポーネントです。 「display: table-column」だけでは列形式のレイアウトを作成できません。

代わりに、テーブルの行内のセルに固有の属性を設定します。たとえば、各行の最初のセルの背景色を指定できます。

HTML では、テーブルの構造は次のとおりです。

<code class="html"><table>
  <col></col>
  <col></col>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table></code>

CSS テーブル プロパティを使用すると、対応する HTML は次のようになります:

<code class="css">.mytable {
  display: table;
}

.myrow {
  display: table-row;
}

.mycell {
  display: table-cell;
}

.column1 {
  display: table-column;
  background-color: green;
}

.column2 {
  display: table-column;
}</code>

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

CSS テーブル モデルの列と行の関係を理解することで、開発者は表のようなレイアウトを効果的に作成し、セル固有の属性を制御できます。

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