HTML表格,高度为100%,行数高度相等.如何使它成为可能？

Question

请仔细阅读这个小提琴,看看到目前为止我尝试了什么.

<div class="outer">
    <div class="inner">
        <table style="background-color: red; width:100%; height:100%;">
            <tr style="background-color: red; width:100%; min-height:30%;">
                <td>Name</td>
            </tr>
            <tr style="background-color: blue; width:100%; min-height:30%;">
                <td>Nirman</td>
            </tr>
            <tr style="background-color: blue; width:100%; min-height:30%;">
                <td>Nirman</td>
            </tr>    
        </table>
    </div>
</div>

我需要显示占用div的全高度的这个表,并且该表的行应该在高度上相等以占据整个表的空间.这意味着,桌子的高度应该是div高度的100%.每行的高度应为div高度的30%.

知道怎么做到这一点？此外,我想要一个适用于大多数浏览器的解决方案,至少从IE 8开始.

任何帮助都非常感谢.

Answer 1

在innerdiv类的样式中,更改min-height:100%为height:100%.这就是你所需要的!

(这是因为min-height不能继承)

这是jsfiddle