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

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

<!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＃问题扩展到一些“大”，更大的东西然后HTML块。我认为TD的高度100％应该指的是包含块（TR，在这种情况下，我尝试过 - 没有身高：100％），但似乎并非如此。

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

只是测试，该网站工作在IE8中所有其他文件和浏览器模式，除了一个我应该使用。

来源

2014-03-19 NathanLoire

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

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

来源

2014-03-19 13:13:36 wikijames

遗憾的是没有。我可能不够具体，只有高度才是重要的。除TD＃问题之外的所有元素都已使用高度：100％进行了样式设计。 – NathanLoire

你可以把你的代码放在jsfiddle中吗？那么它会更清晰 – wikijames

http://jsfiddle.net/jdjpL/在Firefox中工作（因为它应该），IE8只是在整个jsfiddle开玩笑。 – NathanLoire

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

回答

相关问题