CODEWITHSUNDEEP
htmlcsshtml-table
Nirman
Nirman

Reputation: 6783

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, 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.

Upvotes: 4

Views: 48645

Answers (5)

Lasithds
Lasithds

Reputation: 2291

*{
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's a fiddle!

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105873

Through CSS , you have to set height of .inner . min-height value cannot be inherited : http://codepen.io/anon/pen/yuEkA a short cut would be : 

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

Upvotes: 3

Nibhrit
Nibhrit

Reputation: 188

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

Upvotes: 7

Pumpkinpro
Pumpkinpro

Reputation: 847

jQuery solution for making 30% tr height

var t_h = $('.inner').height()

var tr_h = t_h/100*30

$('tr').height(tr_h)
$('table').height(t_h);

jsfiddle

Upvotes: -3

Francesco Novy
Francesco Novy

Reputation: 123

You can position the table absolute. For example, give it the class "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 the full height!

Upvotes: 1

Related Questions