可滚动div内的冻结表标题 [英] Frozen table header inside scrollable div

问题描述

我有三个 div.页眉、中央和页脚.中央 div (gridview) 中有一个表格，它几乎总是比外部 div 长.所以我让这个 div 可以垂直滚动.问题是:如何使表格标题在向下滚动 div 后可见?我可以用单独的 div 或 table 完成这个标题并使其固定，但表格中的列宽并不总是相同 - 所以我不知道如何保持标题中的列宽.有什么线索吗?

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