Html 发布以滚动IE 9上的车身(车身高度=高度线)

Html 发布以滚动IE 9上的车身(车身高度=高度线),html,css,scroll,html-table,internet-explorer-9,Html,Css,Scroll,Html Table,Internet Explorer 9,对不起,我的英语不好,我希望你能理解我想说的话 我正在尝试实现一个HTML表,它支持独立于表头滚动表体 我发现以下问题对我帮助很大: 我测试了以下代码,它可以在Chrome(22)、Firefox(16)和Opera(12)上正常工作: HTML: <table> <thead> <tr> <th>Title1</th> <th>Title2</th> <!-- ...

对不起,我的英语不好,我希望你能理解我想说的话

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

我发现以下问题对我帮助很大:

我测试了以下代码,它可以在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>
thead, tbody {
    display: block;
}

tbody {
    height:500px;
    overflow-y:auto;
    overflow-x:hidden;
}

thead {
    line-height: 20px;
}
因此,它在除IE 9之外的主要浏览器上工作,在IE上,我有一些问题:

  • tbody的高度没有定义(因此我没有任何滚动条)
  • 每个浏览器的高度均为500px(其他浏览器上的tbody高度)
以下两个示例的问题完全相同:

我看到了以下问题(和答案),但对我没有帮助:

所以我确信这个bug来自IE,但我不知道如何在不改变HTML结构的情况下修复它


有人知道吗?

我已经稍微试着解决了。希望它能提供一些想法

HTML


演示

这里是一个简短的答案,允许您在ie9中滚动带有固定标题的表格

在表周围添加一个条件div

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

您必须根据您的桌子调整高度和其他属性。

谢谢!这是可行的,只有一个问题。使用该解决方案,当我们滚动时,只有
上的
可见。但是我也必须看到我的
的风格(因为我使用
表排序器
插件),所以我直接将
绝对值
放在
上,并使用jQuery函数设置我的
left
CSS属性。它并不完美(因为它使用Javascript,我认为如果没有
边框折叠:折叠
,它就无法工作),但它可以在IE上工作,我希望这个错误很快会被修复。
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; }​
<!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]-->
<table>
...
<!--[if lte IE 9]>
</div>
<!--<![endif]-->
    .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;
        }