Make a DIV fill an entire table cell

Question

I've seen this question and googled a bit, but nothing so far has worked. I figure it's 2010 now (those questions/answers are old and, well, unanswered) and we have CSS3! Is there any way to get a div to fill an entire table cell's width and height using CSS?

I don't know what the width and/or height of the cell will be ahead of time, and setting the div's width and height to 100% does not work.

Also, the reason I need the div is because I need to absolutely position some elements outside of the cell, and position: relative does not apply to tds, so I need a wrapper div.

Answer 1

I think that the best solution would be to use JavaScript.

But I'm not sure that you need to do this to solve your problem of positioning elements in the <td> outside of the cell. For that you could do something like this:

<div style="position:relative">
    <table>
        <tr>
            <td>
                <div style="position:absolute;bottom:-100px">hello world</div>
            </td>
        </tr>
    </table>
</div>

Not inline of course, but with classes and ids.

Answer 2

The following code works on IE 8, IE 8's IE 7 compatibility mode, and Chrome (not tested elsewhere):

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

You said in your original question that setting width and height to 100% didn't work, though, which makes me suspect that there is some other rule overriding it. Did you check the computed style in Chrome or Firebug to see if the width/height rules were really being applied?

On another note, http://doctype.com/ might be the place for this question.

Edit

How foolish I am! The div was sizing to the text, not to the td. You can fix this on Chrome by making the div display:inline-block, but it doesn't work on IE. That's proving trickier...

Answer 3

inline-block within a fake table created with css display:table rules seems to work in modern browsers.

http://medero.org/table.html

do you care about IE6/IE7? does table markup really matter? what is the 100% width/height element you care about? can you use scripting?