absolute positioned element using parents width

Question

This is the scenario.

I have a simple table with a header row including several columns which have a dynamically changing width. Within the head row there are lists of a height that is longer than the head rows height, they are however only supposed to be visible on hover, but when on hover they are supposed to be ontop of the headrow but still having the the original 100% width of the parent being the <td> element of the column.

What I did was to set position: absolute on hover but as soon as that happens the element obviously took all the width it can get, fixable only with a specificly applied width, but that doesn't really help me as the column can be resized.

My Question is if there is a way in CSS ( NOT Javascript ) to achieve a behaviour where the element would still use the parent's width.

Answer 1

The answer to your question will vary wildly depending on what you're trying to accomplish. Most blanket solutions require:

• The addition of extra positioning elements (often added using Javascript)
• Setting display: block; on the TH, TD elements (often makes the TABLE behave erratically)

The reasons for this is that adding positioning to a table cell removes it from the flow, which affects table alignment (see this bug report comment). A much longer discussion about this issue and the possible solutions can be found at Does Firefox support position: relative on table elements?

That aside…

If you are using the TABLE for site layout, stop now and re-think your choices in life. There are better options:

• The best option will be the CSS3 Flexible Box Layout model, if and when it becomes widely supported. Support at the time of this writing is minimal, scattered, and doesn't always follow the same standard (caniuse.com: flexbox)
• Until that becomes an option, it's a little known fact that absolutely positioned elements can be positioned inside absolutely positioned elements. See this fiddle for an example of a 100% width/height layout made possible with absolutely positioned elements. Alternatively, the same layout can be made inside a relatively positioned parent element.

If you're not using a TABLE for site layout, then there may be other options open to you. It depends on the desired effect.