Question

我知道，stackoverflow上至少有三十个这样的问题，但我仍然无法实现：

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

解决方案应该适用于IE8 +和最新的FF，Chrome＆amp;苹果浏览器。与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拉出来。

现在通过提供

将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的最简单方法。你不这么认为吗？

如何：使用ONE表修复表头（没有jQuery）

2 个答案: