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
