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

概述抱歉我的英语不好,我希望你能理解我想说的话…… 我正在尝试实现一个HTML表,它支持独立于表头滚动表体. 我发现以下问题对我有很大帮助： How to scroll table’s “tbody” independent of “thead”? 我测试了以下代码,它适用于Chrome(22),Firefox(16)和Opera(12),没有问题： HTML： <table> <thead> 抱歉我的英语不好,我希望你能理解我想说的话……

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

我发现以下问题对我有很大帮助：
How to scroll table’s “tbody” independent of “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 : problem with fixed header table

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

有人知道吗？

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

HTML

<div >    <div >        <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/

总结

以上是内存溢出为你收集整理的html – 在IE 9上滚动tbody的问题(​​tbody的高度=高度线)全部内容，希望文章能够帮你解决html – 在IE 9上滚动tbody的问题(​​tbody的高度=高度线)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。