CSS のみを使用して DIV 要素で表のセルを埋めるにはどうすればよいですか?

CSS を使用して DIV で表のセルを埋める

Web 開発における一般的な課題の 1 つは、DIV 要素がスペース全体を占めるようにすることです。表のセル内。 CSS3 の進歩にも関わらず、この問題は長年にわたって解決されていません。この記事では、動的なテーブル セルのサイズに対応する、この問題に対する CSS ベースの解決策を検討します。

DIV の幅と高さを 100% に設定する従来のアプローチは、テーブル セルが本質的にフィットするように伸縮しないため、多くの場合効果的ではありません。それらの内容。代わりに、目的の結果を達成するには、テーブルとセルのプロパティを操作する必要があります。

次の CSS ハックは、DIV でテーブルのセル全体を埋める簡単かつ効率的な方法を提供します。

tr { height: 1px; }
td { height: inherit; }
div { height: 100%; }

このコードでは、テーブルの行 (TR) の最小高さを 1 ピクセルに設定しています (通常、これはブラウザーによって無視されます)。次に、行から高さを継承するようにテーブル セル (TD) を設定し、DIV に合わせて垂直方向に伸びるようにします。最後に、DIV の高さを 100% に設定し、テーブル セル内の使用可能なスペース全体を占有するようにします。

このソリューションは、IE Edge ブラウザと Chrome ブラウザの両方で動作することがテストおよび確認されており、効果的に問題に対処します。 DIV に表のセルの高さと幅全体を埋める問題。

以上がCSS のみを使用して DIV 要素で表のセルを埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。