如何:使用一个表固定表头(无 jQuery) [英] How to: Fixed Table Header with ONE table (no jQuery)

问题描述

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

一个简单的表格，thead 粘贴/固定在顶部，tbody 滚动.在过去的几天里，我尝试了很多，现在我终于在这里哭了起来.

一个解决方案应该适用于 IE8+ 和最新的 FF、Chrome 和苹果浏览器.与其他可能的重复项(如这个)的区别在于我不想想要使用两个嵌套表或 jQuery(不过，纯 javascript 很好).

我想要的演示:
http://www.imaputz.com/cssStuff/bigFourVersion.html.>

问题是它在 IE 中不起作用，我可以使用一些 JS.

解决方案

好的，我明白了:

您需要将表格包装在两个 DIV 中:

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

DIV 的 CSS 是这样的:

.outerDIV {位置:相对；填充顶部:20px；//你的头的高度}.innerDIV {溢出-y:自动；高度:200px；//实际的滚动容器}

原因是，您基本上使内部 DIV 可滚动，然后通过将 THEAD 粘在外部 DIV 上将其拉出.

现在将 thead 粘贴到 outerDIV 上

table thead {显示:块；位置:绝对；顶部:0；左:0；}

tbody 也需要有 display: block.

现在您会注意到滚动有效，但宽度完全混乱.那是 Javascript 进来的.您可以自行选择分配方式.我自己给了表格中的 TH 固定宽度，并构建了一个简单的脚本，该脚本获取宽度并将它们分配给 tbody 中的第一个 TD 行.

这样的事情应该可以工作:

函数 scrollingTableSetThWidth(tableId){var table = document.getElementById(tableId);ths = table.getElementsByTagName('th');tds = table.getElementsByTagName('td');如果(ths.length > 0){for(i=0; i < ths.length; i++) {tds[i].style.width = getCurrentComputedStyle(ths[i], 'width');}}}函数 getCurrentComputedStyle(元素，属性){var 属性值；如果(window.getComputedStyle){//A 类浏览器var styledeclaration = document.defaultView.getComputedStyle(element, null);attributeValue = styledeclaration.getPropertyValue(attribute);} else if (element.currentStyle) {//IEattributeValue = element.currentStyle[vclToCamelCases(attribute)];}返回属性值；}

当然，如果使用 jQuery，这会容易得多，但目前我不允许在这个项目中使用第三方库.

I know, there are at least 3 dozen questions like this on stackoverflow and still, I could not make this happen:

A simple table where thead is sticked/fixed at the top, and the tbody is scrolled. I tried so much in the past days and now I ended up here crying for help.

A solution should work in IE8+ and newest FF, Chrome & Safari. The difference to other "possible duplicates like this one is that I don't want to use two nested tables or jQuery (plain javascript is fine though).

Demo of what I want:
http://www.imaputz.com/cssStuff/bigFourVersion.html.

Problem is it doesn't work in IE, and I would be fine to use some JS.

解决方案

Ok i got it:

You need to wrap the table in two DIVs:

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

The CSS for the DIVs is this:

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

The reason is, that you basically make the inner DIV scrollable, and pull the THEAD out of it by sticking it to the outer DIV.

Now stick the thead to the outerDIV by giving it

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

The tbody needs to have display: block as well.

Now you'll notice that the scrolling works, but the widths are completely messep up. That's were Javascript comes in. You can choose on your own how you want to assign it. I for myself gave the TH's in the table fixed widths and built a simple script which takes the width and assigns them to the first TD-row in the tbody.

Something like this should work:

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

With jQuery of course this would be a lot easier but for now i was not allowed to use a third party library for this project.

这篇关于如何:使用一个表固定表头(无 jQuery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！