如何:固定表头与一个表(没有jQuery)

Question

我知道，在stackoverflow上至少有30多个这样的问题，但我还是无法做到：

一张简单的桌子，上面贴着/固定着ad，滚动着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可滚动，并通过将其粘贴到外部DIV来将THEAD从中拉出。

现在通过给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，这会容易得多，但目前我不允许在这个项目中使用第三方库。

Answer 2

也许我们应该更改一个方法来归档这个目标。例如：

<div><ul><li>1</li><li>2</li></ul></div> //make it fixed
<table>
    <thead>
        <tr><th>1</th><th>2</th></tr>
    </thead>
    <tfoot></tfoot>
    <tbody></tbody>
</table>

当然，这对信号来说是不好的。但这是最简单的方法，没有js或jq。你不这么认为吗？