Tag Archives: and the rows equally divided in height. How to make it possible?

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.

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