抱歉我的英语不好,我希望你能理解我想说的...
我正在尝试实现一个支持独立于表头滚动表体的 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
所以我确定该错误来自 IE,但我不知道如何在不更改我的 HTML 结构的情况下修复它。
有人知道吗?
最佳答案
我稍微尝试修复它。希望能给点思路
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; }
关于html - 在 IE 9 上滚动 tbody 的问题(tbody 的高度 = 高度线),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12836651/