发布在IE 9上滚动tbody（tbody's height = height-line） [英] Issue to scroll tbody on IE 9 (tbody's height = height-line)
问题描述
我试图实现一个HTML表格支持滚动独立于表头的表体。
我发现了以下这个帮助我很多的问题：
如何滚动表格的tbody独立于thead？
我测试了以下代码，它适用于Chrome（22），Firefox（16）和Opera（12）问题：
HTML：
<表>
< 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;
$ b 所以它适用于除IE 9以外的主要浏览器，在IE上我有有些问题：
$ ul
tbody的高度没有定义（所以我没有任何滚动条）
每个人的身高都是500px（在其他浏览器上的身高）
以下两个示例具有完全相同的问题：< a href =http://jsfiddle.net/nyCKE/2/ =nofollow noreferrer> http://jsfiddle.net/nyCKE/2/ ， http://www.imaputz.com/cssStuff/bigFourVersion.html
我看到以下问题（和答案），但它不能帮助我： IE9 + CSS：固定头表问题
所以我确定这个错误来自IE，但我不知道如何在不改变我的HTML结构的情况下修复它。
有没有人有任何想法？
解决方案我稍微尝试解决它。希望它给出一些想法
HTML
< div class = 包装 >
< div class =inner>
< table>
< thead>< tr>
< th>< p>问题< / p>< / th>
< th>< p>解决方案< / 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;
职位：亲属;
height：200px;
overflow：hidden;
padding：25px 0 0;
border：1px solid＃000;
width：150px
}
.inner {
padding：0;
height：200px;
溢出：auto;
}
table {margin：0 0 0 -1px;边界崩溃：崩溃; 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;
颜色：＃000;
}
thead th {border：none;}
thead tr p {position：absolute;顶部：0; }
.last {padding-right：15px！important; }
Demo http://jsfiddle.net/nyCKE/272/
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 ?
解决方案 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/
这篇关于发布在IE 9上滚动tbody（tbody's height = height-line）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
