在IE 9上滚动tbody的问题(​​tbody的高度=高度线)

Question

抱歉我的英语不好,我希望你能理解我想说的话......

我正在尝试实现一个HTML表,它支持独立于表头滚动表体.

我发现以下问题对我有很大帮助: 如何滚动表格的"tbody"独立于"thead"？

我测试了以下代码,它适用于Chrome(22),Firefox(16)和Opera(12),没有问题:

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;
}

所以它适用于除IE 9之外的主浏览器,在IE上,我有一些问题:

• 没有定义tbody的高度(所以我没有任何滚动条)
• 每个都有500px的高度(其他浏览器的tbody高度)

以下两个示例具有完全相同的问题:http://jsfiddle.net/nyCKE/2/,http://www.imaputz.com/cssStuff/bigFourVersion.html

我看到了以下问题(和答案),但它没有帮助我:IE9 + css:固定标头表的问题

所以我确信这个bug来自IE,但我不知道如何修改它而不改变我的HTML结构.

有人知道吗？

Answer 1

我稍微试图解决它.希望它能给出一些想法

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; }?

演示http://jsfiddle.net/nyCKE/272/