HTML table with 100% of height, and the rows equally divided in height. How to make it possible?

Question

Please go through this fiddle to see what I have tried so far.

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

I need to display this table occupying full height of the div, and rows of this table should be equal in height to occupy space of full table. That means, table's height should be 100% of div's height. and each row's height should be 30% of div's height.

Any idea of how to achieve this? Also, I would like a solution that should work on most of the browsers, at least, starting from IE 8.

Any help on this much appreciated.

Answer 1

In styles of the inner div class, change min-height:100% to height:100% . That's all you need!

(This is because min-height can not be inherited)

Here's the jsfiddle