sticky - 如何: Fixed Table Header with ONE table (no jQuery)

Question

我知道，stackoverflow 上至少有 3 打这样的问题，但我仍然无法做到这一点:

一个简单的表格，其中 thead 粘贴/固定在顶部，并且 tbody 滚动。在过去的几天里我尝试了很多，现在我最终在这里呼喊着寻求帮助。

解决方案应该适用于 IE8+ 和最新的 FF、Chrome 和 Safari。与其他“可能的重复项(如 this one)的区别在于，我不想想要使用两个嵌套表或 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粘贴到outerDIV上

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

tbody 还需要有 display: 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 当然这会容易得多，但目前我不允许在这个项目中使用第三方库。