HTML table with 100% height and rows equally divided by height. How to do it?

Question

Go through this script 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 the entire height of the div, and the rows of this table must be equal in height to occupy the space of the full table. This means that the height of the table should be 100% of the height of the div. and the height of each row should be 30% of the height of the div.

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

Any help on this is greatly appreciated.

Answer 1

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

(This is because min-height cannot be inherited)

Here jsfiddle

Answer 2

You can arrange the table absolute. For example, give it a class of "full-height", and then add the following css:

 table.full-height { position: absolute; bottom: 0; top: 0; left: 0; right: 0; } 

This will expand the table to full height!

Answer 3

With CSS, you have to set the height of .inner. The min-height value cannot be inherited: http://codepen.io/anon/pen/yuEkA a short segment will be:

 html, body , .outer, .inner { height:100%; width:100%; margin:0; } 

Answer 4

 *{ margin:0; padding:0; border:0; } table{ height:100%; position:absolute; } <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#FF0000">&nbsp;</td> </tr> <tr> <td bgcolor="#00FF00">&nbsp;</td> </tr> <tr> <td bgcolor="#0000FF">&nbsp;</td> </tr> </table> 

Here is the violin !

Answer 5

jQuery solution to create 30% tr height

 var t_h = $('.inner').height() var tr_h = t_h/100*30 $('tr').height(tr_h) $('table').height(t_h); 

jsfiddle