Question

我试图让表“innerTable”填充另一个表中的所有剩余空间。有问题的浏览器是IE8（没有兼容模式，IE8浏览器模式，Doc模式IE8标准）。该表不会扩展到包含TD。我试图将表格放在DIV中各种深度（TD，TR，..），但它没有帮助。

<!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>

如果我将td＃问题设置为height: 100%，则innerTable适合剩余的空间，但是td＃问题会扩展为'big'，大于html块。我认为TD的高度100％应该是指包含块（在这种情况下为TR，我尝试使用 - 并且没有高度：100％），但它似乎不是这样。

顺便说一句。设计在其他浏览器中工作，可能只是导致问题的IE8

刚刚测试过，该网站适用于IE8中的所有其他文档和浏览器模式，除了我应该使用的模式。

Answer 1

试试此链接。我想这会对你有所帮助。做这两件事来填补空间。

table tr td{padding:0;}

<table cellpadding="0" cellspacing="0"></table>

或者你这样做

table tr td{position:relative;}

    <table cellpadding="0" cellspacing="0" style="position:absolute;left:0;top:0;width:100%;height:100%"></table>

HERE THE FIDDLE

用于填充另一个单元格内的剩余空间的表（IE8）

1 个答案: