In Firefox, position: relative; doesn't work for table cells. Content positioned absolutely inside a table cell with position: relative; will be positioned in relation to the nearest positioned ancestor outside the table, instead of the table cell itself.

<div style="position: relative;">
    <p>Content outside the table</p>

    <table>
        <tr>
            <td>Normal table cell</td>
            <td style="position: relative;"><p style="position: absolute; top: 0; left: 0;">Positioned absolutely</p></td>
        </tr>
    </table>

Any idea if there's any way to get Firefox to honour position: relative on the table cell?

  • Correct. From the spec: "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." Olly Hodgson over 7 years ago
  • Ah yes, I saw someone mention that, wasnt sure if it was true. Good old specs. Paul D. Waite over 7 years ago

1 answer

danwellman 5600
6
points
This was chosen as the best answer

just add a div as the first-child of the td, position the div relatively and have it take up 100% width and height of the the td, then you can position stuff absolutely inside the div :D

Answered over 7 years ago by danwellman
  • Out of interest, how would you get it to take up 100% of the height of the table cell? Paul D. Waite over 7 years ago
  • height:100% or you can use jQuery. $('div').css('height', $('td').height()+'px'); Mark Malek over 7 years ago