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

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, & 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 assist on this much appreciated.

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

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

Here’s the jsfiddle