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

Colspan/Rowspan を持つセルのテーブル形式の表示

現在の CSS 実装では、display プロパティを使用したテーブル形式のレイアウトのサポートが限定的に提供されています。具体的には、display: table-cell を持つ要素は、colspan 属性または rowspan 属性をサポートしません。

サンプル コード:

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

問題:

表示を伴う要素のコルスパン効果を実現するにはどうすればよいですか: table-cell?

CSS Display:

の制限事項 残念ながら、現在の CSS 仕様では、display: table-cell の要素で Colspan または rowspan を使用できません。参照された投稿に記載されているように、これはこの表示モードの制限です。

代替:

CSS は表示用の Colspan に相当するものを提供していないため: table-セルの場合は、次のような代替レイアウト方法の使用を検討してください。

• 実際の HTML の使用table
• ディスプレイを備えたコンテナ内で絶対配置された div を使用する: table
• 柔軟なレイアウトのためのグリッド システムを提供する Bootstrap などの JavaScript フレームワークを探索する

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