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.
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
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?
How foolish I am! The
div was sizing to the text, not to the
td. You can fix this on Chrome by making the
display:inline-block, but it doesn’t work on IE. That’s proving trickier…
Answered By – Ian Henry
Answer Checked By – Willingham (AngularFixing Volunteer)