html - 親の幅を使用した絶対位置の要素

Question

これがシナリオです。

動的に変化する幅を持ついくつかの列を含むヘッダー行を持つ単純なテーブルがあります。ヘッドロー内には、ヘッドローの高さよりも長い高さのリストがありますが、ホバー時にのみ表示されるはずですが、ホバーすると、ヘッドローの上にあるはずですが、元の100が残っています。 ％<td>列の要素である親の幅。

私がしたことはposition: absoluteホバーに設定することでしたが、それが起こるとすぐに要素は明らかにそれが得ることができるすべての幅を取り、特定の適用された幅でのみ修正可能ですが、列のサイズを変更できるのでそれは本当に役に立ちません。

私の質問は、CSS（Javascriptではない）に、要素が引き続き親の幅を使用する動作を実現する方法があるかどうかです。

Answer 1

あなたの質問に対する答えは、何を達成しようとしているのかによって大きく異なります。ほとんどのブランケット ソリューションには次のものが必要です。

• 余分な配置要素の追加 (多くの場合、Javascript を使用して追加されます)
• 要素display: block;の設定(多くの場合、動作が不安定になります)TH, TDTABLE

これは、テーブル セルに配置を追加するとフローから削除され、テーブルの配置に影響するためです (このバグ レポートのコメントを参照してください)。この問題と考えられる解決策についてのより長い議論は、Does Firefox support position: relative on table elements? にあります。

それはさておき…</p>

TABLEfor site レイアウトを使用している場合は、今すぐやめて、人生の選択を再考してください。より良いオプションがあります：

• CSS3 フレキシブル ボックス レイアウトモデルが広くサポートされるようになった場合、最良の選択肢はCSS3 フレキシブル ボックス レイアウトモデルです。この記事の執筆時点でのサポートは最小限で、散在しており、常に同じ標準に従っているとは限りません ( caniuse.com: flexbox )
• それがオプションになるまでは、絶対配置要素を絶対配置要素内に配置できることはあまり知られていません。絶対配置要素で可能になった幅/高さ 100% のレイアウトの例については、このフィドルを参照してください。または、相対的に配置された親要素内に同じレイアウトを作成することもできます。

for site レイアウトを使用していない場合はTABLE、他のオプションが開かれている可能性があります。それは望ましい効果に依存します。