对不起我的英文不太好,希望你能理解我想表达的意思...
我正在尝试实现一个支持表格主体独立滚动的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的高度未定义(因此我没有任何滚动条)
- 每个tr的高度为500px(其他浏览器上的tbody的高度)
以下两个示例完全具有相同的问题:http://jsfiddle.net/nyCKE/2/,http://www.imaputz.com/cssStuff/bigFourVersion.html
我看到了下面的问题(和答案),但这对我没有帮助:IE9 + css:固定表头的问题
所以我确定这个错误来自IE,但我不知道如何在不更改我的HTML结构的情况下修复它。
有人有什么想法吗?
<th>
上的<p>
。但是我也必须看到我的<th>
样式(因为我使用了tableSorter
插件),所以我直接在我的<th>
上设置了absolute
值,并使用jQuery函数设置了我的left
CSS属性。这不是完美的(因为它使用Javascript,我认为它没有border-collapse:collapse
就无法工作),但它在IE上可以工作,希望这个错误很快就会被修复。 - Dorian