I have a web page where I have a table nested inside of a TD tag (don't flame me for this, I have a good reason for doing it this way). When the page loads, I want to expand the height of the nested table to be the height of the TD cell that contains it. Currently I do it with code like this:
$(document).ready(function()
{
$('.TakeOffItemGroupTable').each(function()
{
$(this).height($(this).closest('td').height());
});
}
This works, but if there are a lot of tables to resize on the page, it can take ~20 seconds for IE8 to do it (FF takes a second or two, of course). That's because $(this).height($(this).closest('td').height()); takes:
- 1ms in Chrome
- 18ms in Firefox
- 330ms in IE8
Is there some other way that I can have the nested table always take on the height of its container?
Things I have tried:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<table border="1" >
<tr>
<td width="100px">JKLSD FASJDFKLSA DFKLADFJL KASDJFKLSAD JFSAKLDF</td>
<td style="height: 100%;">
<table style="height:100%;" border="1">
<tr>
<td>
I should be 100% tall!
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
This works in Firefox but not in IE.