CSS3 はどのようにして DIV を拡張して表のセルを満たすことができますか?

表のセル内に DIV を埋めるための CSS3 ソリューション

DIV で表のセルを埋めるという古典的な問題を拡張して詳しく掘り下げますCSS3 の世界に飛び込み、現代的なソリューションを探求します。

課題

DIV の幅と高さを 100% に設定するなどの従来のソリューションは、最新のブラウザーでは機能しなくなりました。さまざまな表のセル サイズに動的に適応する、より洗練された方法が必要です。

CSS3 Savior

CSS3 では、TR (テーブル行) 要素と TD (テーブル データ) 要素の高さプロパティを巧みに操作することで、プロパティを「継承」するという概念が導入されています。 、TD 内の DIV を効果的に強制して全体を埋めることができます。 cell.

解決策

1. 1px などの偽の高さを使用して TR を定義します。この高さはブラウザによって無視されます。
2. TD の高さを「継承」に設定します。これにより、TD は親の高さを採用するように指示されます ( TR).
3. DIV の高さを「100%」に設定します。

この手法により、DIV は TD の継承された高さを継承できます。これは、次の内容によって動的に決定されます。セル。

ブラウザ互換性

このソリューションはテストされ、IE Edge と Chrome の両方で動作することが確認されています。

サンプル コード

<table>

以上がCSS3 はどのようにして DIV を拡張して表のセルを満たすことができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。