CSS では「display: table-column」は実際に何をするのでしょうか?

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 を考慮してください。 table:

<code class="html"><table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table></code>

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

<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>

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

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

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

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