sticky – 如何：使用ONE表修复表头(没有jQuery)

好,我知道了： @H_404_2@您需要将表包装在两个DIV中：

<div class="outerDIV">
  <div class="innerDIV">
    <table></table>
  </div>
</div>

@H_404_2@DIV的CSS是这样的：

.outerDIV {
  position: relative;
  padding-top: 20px;   //height of your thead
}
.innerDIV {
  overflow-y: auto;
  height: 200px;       //the actual scrolling container
}

@H_404_2@原因是,您基本上可以使内部DIV可滚动,并通过将THEAD粘贴到外部DIV来将THEAD拉出来.

@H_404_2@现在通过给它将thead粘贴到outerDIV上

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

@H_404_2@tbody也需要显示：block.

@H_404_2@现在@R_450_8462@滚动有效,但宽度完全是正确的.这是Javascript进来的.
您可以根据自己的喜好选择分配方式.我为自己给了表中固定宽度的TH并构建了一个简单的脚本,它取宽度并将它们分配给tbody中的第一个TD行.

@H_404_2@像这样的东西应该工作：

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;
}

@H_404_2@使用jQuery当然这将更容易,但是现在我不允许在这个项目中使用第三方库.