如何:使用ONE表修复表头(没有jQuery)

Question

我知道,在stackoverflow上至少有三十个这样的问题仍然存在,我无法做到这一点:

一个简单的表格,其中thead被固定/固定在顶部,并且tbody被滚动.我过去几天尝试过这么多,现在我最终在这里哭泣求救.

解决方案应该适用于IE8 +和最新的FF,Chrome和Safari.与其他"像可能重复的区别这一个是,我不希望使用两个嵌套表或jQuery的(普通的JavaScript是罚款虽然).

演示我想要的东西:
http://www.imaputz.com/cssStuff/bigFourVersion.html.

问题是它在IE中不起作用,我可以使用一些JS.

Answer 1

好,我知道了:

您需要将表包装在两个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通过给它来坚持到外面的DIV

table thead {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

该tbody需求有display: block也.

现在您会注意到滚动有效,但宽度完全是正确的.这就是Javascript的用法.您可以根据自己的需要选择分配方式.我为自己给了表中固定宽度的TH并构建了一个简单的脚本,它取宽度并将它们分配给表中的第一个TD行tbody.

这样的事情应该有效:

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当然这将更容易,但是现在我不允许在这个项目中使用第三方库.