CSS: Unable to set tbody height in % for scroll.

Question

Hi,

I'm trying the CSS solution to scrolling table contents while keeping the header fixed.

CSS Code 1:

<style type='text/css'>
    *   {
    padding:0;
    margin:0;
    border:0;
    }
    #ListData   {
        display:block;
        width:100%;
        height:100%;
        float:left;
        background:#ffffff;
    }
    #ListData table {
                    width:100%;
                }
    #ListData thead {
                    position:relative;
                    width:100%;
                    height:20px;
                    overflow:auto;
                    background:#0099cc;
                }
    #ListData tbody {
                    position:relative;  
                    width:100%;
                    height:300px;
                    overflow:auto;
                }               
    </style>

The output for this style is here : http://riotdesign.in/test.php

This works fine in Firefox (i dont care about IE at the moment.. )

However, if i use percentages instead of px or em:

<style type='text/css'>
    *   {
    padding:0;
    margin:0;
    border:0;
    }
    #ListData   {
        display:block;
        width:100%;
        height:100%;
        float:left;
        background:#ffffff;
    }
    #ListData table {
                    width:100%;
                }
    #ListData thead {
                    position:relative;
                    width:100%;
                    height:10%;
                    overflow:auto;
                    background:#0099cc;
                }
    #ListData tbody {
                    position:relative;  
                    width:100%;
                    height:50%;
                    overflow:auto;
                }               
    </style>

This is what i get : http://riotdesign.in/test2.php

What am i doing wrong? :)

Answer 1

At some point, your objects need to have a block level parent element with a definitive size in order to get the scrolling you want.

Specifically in your case, either the containing DIV ListData or the ListData table need to have specific height.

When adding percentage values for height and width, make sure you know the answer to "x% of what...?" and follow that question up the chain until you hit something with hard boundaries. If you make it to the Body element and still do not have a hard boundary, you will not get the effect you desire.

I tested both of these in Firefox 3.5.xx and got the tbody to scroll:

#ListData
{
    display:block;
    width:100%;
    height:200px;
    float:left;
    background:#ffffff;
}

or

#ListData table {
   width:100%;
   height: 200px;
}

This also works:

body
{ 
  width: 100%;
  height:600px;
}