I am attempting to make the "innerTable" fill up all available space within another table. The issue is with IE8 (no compatibility mode, IE8 browser mode, Doc mode IE8 Standards). The table does not expand to fit the containing TD. I tried enclosing the table in a DIV at different levels (TD, TR, etc.) but it did not solve the problem.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #full {
height: 100%;
}
.myTable {
height: 100%;
table-layout: fixed;
width: 300px;
}
.fit {
height: 1px;
}
td {
border: 1px solid gray;
padding: 5px 10px 5px 10px;
}
</style>
</head>
<body>
<table class="myTable">
<tr class="fit"><td><h1> hello </h1></td></tr>
<tr style="height: 100%;">
<td id="problem">
<table id="innerTable" style="height: 100%; white-space: nowrap;">
<tr style="height: 100%;">
<td style="height: 100%;">
Hello World!!!
</td>
</tr>
</table>
</td>
</tr>
<tr class="fit"><td><h2> world </h2></td></tr>
</table>
</body>
</html>
If I set the td#problem to height: 100%, the innerTable fills the remaining space, but the td#problem expands beyond its block, becoming larger than the HTML block itself. I believed that setting TD's height to 100% should refer to the containing block (TR in this case, which I tested with and without height:100%), but apparently it does not work that way.
By the way, the design functions correctly in other browsers - it seems to be an issue specific to IE8.
I have confirmed that the website works on ALL other document and browser modes in IE8, except the one I need to use.