滚动DIV中冻结表头 [英] Frozen table header inside scrollable div

问题描述

我有3 div的。头，中央和页脚。有中央格（GridView控件）的表，这几乎比外层div总是更长的时间。所以我做了这个垂直滚动div的。现在的问题是：如何才能让表头该div滚动下来以后这将是可见的？我可以做独立格或表这个头，并使其固定的，但表中的列的宽度并不总是一样的 - 所以我不知道如何保持列的宽度在标题即可。任何线索？

I've three divs. Header, central and footer. There is a table in central div (gridview) which is almost always longer than outer div. So I've made this div scrollable vertically. The question is: how can I make table header that it would be visible after div is scrolled down? I could have done this header with separate div or table and make it fixed but widths of columns in the table are not always the same - so I don't know how to maintain widths of columns in header then. Any clue?

推荐答案

下面是一个基本的解决方案使用javascript：

Here is a basic solution using javascript:

function position(table) {
    table.rows[0].style.position="absolute";
    table.rows[0].style.top="0px";
    table.style.marginTop = table.rows[0].clientHeight/1.2;
    var widths = Array();
    for(var i = 0; i < table.rows[0].cells.length; i++) {
        widths[i] = max(table.rows[0].cells[i].clientWidth, table.rows[1].cells[i].clientWidth);
    }
    for(var row = 0; row < table.rows.length; row++) {
        for(var col = 0; col < widths.length; col ++) {
            table.rows[row].cells[col].style.width = widths[col] + "px";
        }
    }
}

function max(num1, num2) { return (num1 > num2) ? num1 : num2; }

这篇关于滚动DIV中冻结表头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！