CSS「display: table-cell」を使用してcolspanとrowspanをシミュレートするにはどうすればよいですか?

テーブルのような動作の実装: CSS 表示での Colspan と Rowspan の不在への対処: Table-Cell

現代の Web 開発では、テーブルのように動作するように要素をスタイリングすることがよくあります。 display: table や display: table-cell などの CSS プロパティを使用すると、開発者はテーブルのようなレイアウトを実現できます。ただし、colspan と rowspan の基本的な機能をシミュレートするには制限があります。

次の HTML および CSS コードを検討してください。

HTML:

<div class="table">
  <div class="row">
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
  </div>
  <div class="row">
    <div class="cell colspan2">Cell</div>
  </div>
</div>

CSS:

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

.colspan2 {
  /* What to do here? */
}

目標は、2 行目の「Cell」を横にまたがるようにすることです。 2つの列。残念ながら、display: table-cell の CSS 要素には、colspan または rowspan に直接相当するものはありません。

調査によると、この制限は、display: table レイアウト モードが完全な実装ではないという事実に起因しています。 HTML テーブル モデル。特定のテーブルのような動作を模倣しますが、すべてを模倣するわけではありません。したがって、colspan または rowspan を明示的に定義する機能がありません。

このようなシナリオでは、display:table に依存せずに、目的のテーブルのようなレイアウトを実現するための代替アプローチを検討することをお勧めします。考えられる解決策の 1 つは、フレックスボックスを使用することです。以下に例を示します。

CSS:

.flex-table {
  display: flex;
  flex-direction: row;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-cell {
  display: flex;
  flex: 1 0 auto;
}

.colspan2 {
  flex: 2 0 auto;
}

このソリューションには、colspan と rowspan のサポートを提供しながら、フレックスボックスを使用してテーブルのようなレイアウトを作成することが含まれます。ただし、ブラウザが異なるとレイアウトのレンダリングが若干異なる場合があることに注意してください。一貫した結果を保証するために、ブラウザ間でコードを徹底的にテストすることを常にお勧めします。

以上がCSS「display: table-cell」を使用してcolspanとrowspanをシミュレートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。