Issue to scroll tbody on IE 9 (tbody's height = height-line) - html

Question

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 table head.
I found the following question which helped me a lot :
How to scroll table's "tbody" independent of "thead"?
I tested the following code, it works on Chrome (22), Firefox (16) and Opera (12) without issue :
HTML :
<table>
<thead>
<tr>
<th>Title1</th>
<th>Title2</th>
<!-- ... -->
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<!-- ... -->
</tr>
<!-- ... -->
</tbody>
</table>
CSS :
thead, tbody {
display: block;
}
tbody {
height:500px;
overflow-y:auto;
overflow-x:hidden;
}
thead {
line-height: 20px;
}
So it works on the main browsers except IE 9, on IE, I have some issues :
The tbody's height is not defined (so I don't have any scrollbar)
Each has an height of 500px (the tbody's height on other browsers)
The two following examples have exactly the same issues : http://jsfiddle.net/nyCKE/2/ , http://www.imaputz.com/cssStuff/bigFourVersion.html
I saw the following question (and answer) but it doesn't help me : IE9 + css : problem with fixed header table
So I'm sure that the bug comes from IE but I don't have any idea how to fix it without change my HTML structure.
Have someone any idea ?

Answer 1

I have slightly tried to fix it. Hope it gives some idea
HTML
<div class="wrap">
<div class="inner">
<table>
<thead><tr>
<th><p>Problem</p></th>
<th><p>Solution</p></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>​
CSS
p {margin:0 0 1em}
table p {margin :0}
.wrap {
margin:50px 0 0 2%;
float:left;
position:relative;
height:200px;
overflow:hidden;
padding:25px 0 0;
border:1px solid #000;
width:150px
}
.inner {
padding:0 ;
height:200px;
overflow:auto;
}
table { margin:0 0 0 -1px; border-collapse:collapse; width:130px}
td {
padding:5px;
border:1px solid #000;
text-align:center;
}
thead th {
font-weight:bold;
text-align:center;
border:1px solid #000;
padding:0 ;
color:#000;
}
thead th {border:none;}
thead tr p { position:absolute; top:0; }
.last { padding-right:15px!important; }​
Demo http://jsfiddle.net/nyCKE/272/

Answer 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 IE 9]>
<div class="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_wrapper tbody {
height: auto;
}
.old_ie_wrapper thead tr {
position: absolute;
}
.old_ie_wrapper tbody tr:first-child {
height: 67px;
vertical-align: bottom;
}
You will have to adjust the heights and probably other properties based on your table.