Issue To Scroll Tbody On Ie 9 (tbody's Height = Height-line)

Sorry for my bad English, I hope you're going to understand what I want to say... I'm trying to implement an HTML table which support scrolling of table bodies independently of the

Solution 1:

I have slightly tried to fix it. Hope it gives some idea

HTML

<divclass="wrap"><divclass="inner"><table><thead><tr><th><p>Problem</p></th><th><p>Solution</p></th></tr></thead><tbody></tbody></table></div></div>​

CSS

p {margin:001em}
tablep {margin :0}
.wrap {
    margin:50px002%;
    float:left;
    position:relative;
    height:200px;
    overflow:hidden;
    padding:25px00;
    border:1px solid #000;
width:150px
}
.inner {
    padding:0 ; 
    height:200px;
    overflow:auto;
}    
table {  margin:000 -1px; border-collapse:collapse; width:130px}
td {
    padding:5px;
    border:1px solid #000;
    text-align:center;    
}
theadth {
    font-weight:bold;
    text-align:center;
    border:1px solid #000;
    padding:0 ;    
    color:#000;
}
theadth {border:none;}
theadtrp {  position:absolute;   top:0;    }
.last { padding-right:15px!important; }​

Demo http://jsfiddle.net/nyCKE/272/

Solution 2:

Here is a shorter answer that allows you to scroll the table with a fixed header in ie9.

Add a conditional div around the table

<!--[if lte IE9]>
<divclass="old_ie_wrapper"><!--<![endif]--><table>
...
<!--[if lte IE 9]>
</div>
<!--<![endif]-->

Add the following styles for ie9

.old_ie_wrapper {
        height: 500px;
        overflow: auto;
    }

        .old_ie_wrappertbody {
            height: auto;
        }

        .old_ie_wrappertheadtr {
            position: absolute;
        }

        .old_ie_wrappertbodytr:first-child {
            height: 67px;
            vertical-align: bottom;
        }

You will have to adjust the heights and probably other properties based on your table.