如何：固定表头与一个表（没有的jQuery）(How to: Fixed Table Header

我知道，至少有3分类似这样的问题上计算器，仍然，我不能做到这一点：

其中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滚动，并通过将其粘到外DIV拉THEAD出来。

现在贴thead给它的outerDIV

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

的tbody需要有display: block为好。

现在你会发现，滚动运作，但宽度完全messep起来。这是使用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当然，这一切都轻松了很多，但现在我是不允许使用第三方库为这个项目。

Answer 2:

也许我们应该改变这种archieve作为goal.Such的方法：

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

当然，这是不好sematic.But是不JS或JQ最简单的方法。你不这么认为吗？

文章来源: How to: Fixed Table Header with ONE table (no jQuery)