How to position elements inside a TD or TH without getting a warning in Firefox?

Question

I'm using an absolutely positioned element in a table header cell. To do this, the TH has to be positioned itself, to make it the child element's offsetParent (in my case, using position:relative). Unfortunately, it appears that current Firefox versions will issue a warning any time a TD or TR is given a position other than static.

With the following minimal table HTML

<table>
<tr><th>head</th></tr>
<tr><td>cell</td></tr>
</table>

and the following minimal CSS rules

th { position: relative }  // either of these is enough
td { position: relative }  // to trigger the warning
table { border-collapse: collapse }

this warning appears in the console for Firefox 30 and 32:

Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.

(the warning does not appear when the table borders are kept separate)

The source of this message is Firefox's table layout code:

/* static */ void
nsTableFrame::RegisterPositionedTablePart(nsIFrame* aFrame)
{
  // Supporting relative positioning for table parts other than table cells has
  // the potential to break sites that apply 'position: relative' to those
  // parts, expecting nothing to happen. We warn at the console to make tracking
  // down the issue easy.

So it seems we get this warning even if we're doing nothing wrong at all, because other sites may rely on the position rule doing "nothing". Is there a way to get rid of this annoying warning? It's basically telling me: Warning, what you're doing actually works!

Even if you could get rid of the warning message, it doesn't mean that it would get `position: relative` to work on table cells. According to CSS Level 2 spec the effect of `position: relative` on table-cell,... is *undefined*. — Hashem Qolami, Oct 10 '14 at 17:59
@HashemQolami True, but the warning itself and the source comment say that positioning table parts is now supported in FF. The source comment also suggests that only positioning "table parts _other than_ table cells" could lead to breakage, and I'm not doing that. — Zilk, Oct 10 '14 at 18:12
your question seems to be answered in the following thread here: http://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements — armen, Dec 02 '14 at 12:22

score 2 · Answer 1 · answered Dec 11 '14 at 21:11

2

I was getting the same warning and resolved it by applying positioning to a div inside the th or td rather than directly to the td or th. Not sure why it cares but now I don't need to see it anymore.

td div{position:relative;}

<table>
  <tr>
    <td>
      <div></div>
    </td>
  </tr>
</table>

answered Dec 11 '14 at 21:11

Jessica

141
3
6

Use `td > div`, otherwise you'll select other descendant `
` elements too.
– Dai Sep 11 '22 at 05:57

score 0 · Answer 2 · edited Aug 14 '21 at 07:17

0

Have you tried this?

<table>
<tr><th><span class="pos1">head</span></th></tr>
<tr><td><span class="pos2">cell</span></td></tr>
</table>

css:

.pos1{
position:absolute;
top:25px /* example*/
}

.pos2{
position:absolute;
top:10px /* example*/
}

edited Aug 14 '21 at 07:17

peter.babic

3,214
3
18
31

answered Oct 10 '14 at 18:46

Webill

365
3
12

Not really. In your example, the SPAN elements would be positioned relative to the BODY, which is not what I need. – Zilk Oct 12 '14 at 15:04
Even if you add a relative position to th and td? – Webill Oct 13 '14 at 16:25
1

Yes, but then I get the warning again :) Anyway, this appears to be a bug in Firefox, and a patch has already been committed: https://bugzilla.mozilla.org/show_bug.cgi?id=1081683 – Zilk Oct 14 '14 at 20:32

How to position elements inside a TD or TH without getting a warning in Firefox?

2 Answers2