Make a DIV fill an entire table cell
div height=100% in table cell will work only when table has height attribute itself.
<table border="1" style="height:300px; width: 100px;">
<tr><td>cell1</td><td>cell2</td></tr>
<tr>
<td style="height: 100%">
<div style="height: 100%; width: 100%; background-color:pink;"></div>
</td>
<td>long text long text long text long text long text long text</td>
</tr>
</table>
UPD in FireFox you should also set height=100%
value to the parent TD
element
I had to set a fake height to the <tr>
and height: inherit for <td>s
tr has height: 1px
(it's ignored anyway)
Then set the td height: inherit
Then set the div to height: 100%
This worked for me in IE edge and Chrome:
<table style="width:200px;">
<tr style="height: 1px;">
<td style="height: inherit; border: 1px solid #000; width: 100px;">
<div>
Something big with multi lines and makes table bigger
</div>
</td>
<td style="height: inherit; border: 1px solid #000; width: 100px;">
<div style="background-color: red; height: 100%;">
full-height div
</div>
</td>
</tr>
</table>
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?
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...