Html 发布以滚动IE 9上的车身(车身高度=高度线)
对不起,我的英语不好,我希望你能理解我想说的话 我正在尝试实现一个HTML表,它支持独立于表头滚动表体 我发现以下问题对我帮助很大: 我测试了以下代码,它可以在Chrome(22)、Firefox(16)和Opera(12)上正常工作: HTML: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> <!-- ...
<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高度)
有人知道吗?我已经稍微试着解决了。希望它能提供一些想法 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;
}