Question

回到桌子布局的美好时光，人们可以做到：

<div style="height: 400px;">
<table style="height: 100%">
    <tr>
        <td>This cell sizes to its content</td>
    </tr>
    <tr>
        <td height="100%">This cell takes up the remaining height.
    </tr>
    <tr>
        <td>This cell sizes to its content</td>
    </tr>
</table>
</div>

现在，我正在尝试使用display: table和display: table-cell来实现相同的目标。这是我的尝试：

http://jsfiddle.net/p3jwr/6/

它在FF和Chrome中渲染得很好。在该表中应该构建的400px中，第1行和第3行各占100px，第2行占用剩余空间，最大值为200px。

在IE9中（这是我需要支持的最低IE），第二行扩展为400px，这是 表的父 大小的100％。这将表格本身延伸到其父母的100％以上。

这里的目标是让表拉伸以填充其父级，其大小未知，但肯定会设置，并且让中间行拉伸以占用第一个未使用的空间或第三排。

有人可以为IE提出解决方法吗？它甚至不必在其他浏览器中工作，但我希望坚持使用display：table。

Answer 1

希望这会有所帮助：

div > table {
        height : auto !important;  
        height : 100%;            
        min-height : 100%;        
    }

它适用于大多数浏览器。检查一下！

Answer 2

试试这段代码，

<div style="height: 400px;">
   <table style="height: 100%">
         <tr style="height: 25%">
               <td>This cell sizes to its content</td>
         </tr>
         <tr style="height: 50%">
               <td>This cell takes up the remaining height.
         </tr>
         <tr style="height: 25%">
               <td>This cell sizes to its content</td>
         </tr>
   </table>
 </div>

有以下假设， 25％的400px = 100px 50％的400px = 200px

如何在IE中将显示表格单元格拉伸到表格的剩余高度

2 个答案: