HTML table with 100% of height, and the rows equally divided in height. How to make it possible?
css, html, html-table
Solution
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
Problem
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.