CSS Positioning inside of an HTML Table

Question

I feel like this should be a no brainer, but clearly I'm missing something...

I'm stuck with an HTML table on a page, and need to absolutely position an element that is rendered inside of the table so that it can display properly when we apply DHTML to show it.

I tried absolutely positioning it relative to the bottom of a table row, but the browser (FF and IE) will not render it relative to the row. Instead it takes the positioning relative to the next parent above the row that has relative positioning.

Basically it is:

<table>
<tr class="aRelativelyPositionedClass">
    <td>
         <div class="anAbsolutelyPositionedClass">stuff I want to absolutely position</div>
    </td>
</tr>
</table>

Is it possible to position the inner div relative to the row? Or is there an HTML issue I'm missing with tables?

Answer 1

According to the http://www.w3.org/TR/CSS2/visuren.html#choose-position discussion of relative: "The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined."

The problem is that Firefox, Google Chrome, Opera and Safari have chosen for position:relative to do nothing on a table-row. IMHO, they should have implemented the change of frame-of-reference, so that absolutely-positioned subelements will be rendered relative to the table-row, but they didn't.

My need to absolutely-position elements in a row occurred in JavaScript, so I had an easy solution. If the element's display is table-row, change it to block, THEN set position:relative. I realize this doesn't help you if you're trying to do it all soley using HTML and CSS. But in my situation, setting display:block before position:relative worked.