我知道,在stackoverflow上至少有三十个这样的问题仍然存在,我无法做到这一点：
一个简单的表格,其中thead被固定/固定在顶部,并且tbody被滚动.
在过去的几天里我做了很多尝试,现在我最终在这里哭泣求救.
解决方案应该适用于IE8和最新的FF,Chrome和&苹果浏览器.
与其他“可能的重复项如this one的区别在于我不想使用两个嵌套表或jQuery(普通的javascript虽然很好).
演示我想要的东西：
http://www.imaputz.com/cssStuff/bigFourVersion.html.
问题是它在IE中不起作用,我可以使用一些JS.
解决方法
好,我知道了：
您需要将表包装在两个DIV中：
<div class="outerDIV">
<div class="innerDIV">
<table></table>
</div>
</div>
DIV的CSS是这样的：
.outerDIV {
position: relative;
padding-top: 20px; //height of your thead
}
.innerDIV {
overflow-y: auto;
height: 200px; //the actual scrolling container
}
原因是,您基本上可以使内部DIV可滚动,并通过将THEAD粘贴到外部DIV来将THEAD拉出来.
现在通过给它将thead粘贴到outerDIV上
table thead {
display: block;
position: absolute;
top: 0;
left: 0;
}
tbody也需要显示：block.
现在您会注意到滚动有效,但宽度完全是正确的.这是Javascript进来的.
您可以根据自己的喜好选择分配方式.我为自己给了表中固定宽度的TH并构建了一个简单的脚本,它取宽度并将它们分配给tbody中的第一个TD行.
像这样的东西应该工作：
function scrollingTableSetThWidth(tableId)
{
var table = document.getElementById(tableId);
ths = table.getElementsByTagName('th');
tds = table.getElementsByTagName('td');
if(ths.length > 0) {
for(i=0; i < ths.length; i++) {
tds[i].style.width = getCurrentComputedStyle(ths[i],'width');
}
}
}
function getCurrentComputedStyle(element,attribute)
{
var attributeValue;
if (window.getComputedStyle)
{ // class A browsers
var styledeclaration = document.defaultview.getComputedStyle(element,null);
attributeValue = styledeclaration.getPropertyValue(attribute);
} else if (element.currentStyle) { // IE
attributeValue = element.currentStyle[vclToCamelCases(attribute)];
}
return attributeValue;
}
使用jQuery当然这将更容易,但是现在我不允许在这个项目中使用第三方库.