Javascript 冻结表中的顶行（上/下），并允许向左/向右滚动

我有一些HTML格式的宽表，需要在浏览器中向左/向右滚动才能查看。我想垂直保持最上面一行的位置，同时允许它向左/向右滚动

我一直在网上搜寻一些简单的东西，但我没有找到任何能同时满足这两种条件的东西

编辑： 我用可能更清楚的方式重申我的问题- 我希望用现有的html表格修改现有的html文件，这样第一行是垂直固定的，但会随着正文水平滚动。我无法控制这些html文件最初是如何生成的，因此我必须通过python添加任何样式，以获得所需的输出。在我看来，只有一个滚动条。这能做到吗？ 有人有主意吗

要提供更多信息： 我尝试了许多选项，包括尝试为第一行添加css类、使用overflow-y以及使用多个div。我更愿意在css格式中解决这个问题，因为使用python修改css文件可能比向已经制定好的html表中添加一堆div更容易，所有编辑都是通过python完成的。 到目前为止，每一种方法充其量看起来都有点不对劲，不希望在第一行的正下方留下一个滚动条

---

我希望保持第一行的外观不变，但只是垂直固定，并允许它与其余行水平滚动。

我能够解决我的问题，并将我的解决方案发布在此处，以防其他人使用excel或任何预先确定的html表输出的网页，并希望第一行或任何给定行垂直冻结，但水平滚动。该解决方案依赖于javascript/jquery/CSS，并实现了双div方法，我不需要在Saechel提供的解决方案中讨论页脚。我尝试了几乎所有的方法，这是唯一令人满意的方法：

CSS文件包括以下内容：

#header { position: fixed;}

$(document).ready(function(){



function scroll_Table_Header()
    {
        var pos = $(this).scrollLeft();
        $("#header").animate({left: "-" + pos},1);
        //console.log("position: " + pos);
        //alert("Hi");
    }

    var firstDiv = $("<div></div>");
    firstDiv.attr("id","header");

    var secondDiv = $("<div></div>");
    secondDiv.attr("id","content");

    var colformatting = $("table colgroup").clone();

    var titlebar = $("table tr:first-child").clone();

    $("table").attr("id", "origTable");

    var newTable = $("<table id='newTable'></table>").attr("style", $("table").attr("style"));
    newTable.attr("id", "newTable");
    newTable.append(colformatting);
    newTable.append(titlebar);


    $("#origTable").before(firstDiv);

    firstDiv.append(newTable);

    secondDiv.append($("#origTable"));

    $(firstDiv).after(secondDiv);

    $(window).scroll(function(e)
    {
        scroll_Table_Header();
    });
});

javascript文件包括以下内容：

#header { position: fixed;}

$(document).ready(function(){



function scroll_Table_Header()
    {
        var pos = $(this).scrollLeft();
        $("#header").animate({left: "-" + pos},1);
        //console.log("position: " + pos);
        //alert("Hi");
    }

    var firstDiv = $("<div></div>");
    firstDiv.attr("id","header");

    var secondDiv = $("<div></div>");
    secondDiv.attr("id","content");

    var colformatting = $("table colgroup").clone();

    var titlebar = $("table tr:first-child").clone();

    $("table").attr("id", "origTable");

    var newTable = $("<table id='newTable'></table>").attr("style", $("table").attr("style"));
    newTable.attr("id", "newTable");
    newTable.append(colformatting);
    newTable.append(titlebar);


    $("#origTable").before(firstDiv);

    firstDiv.append(newTable);

    secondDiv.append($("#origTable"));

    $(firstDiv).after(secondDiv);

    $(window).scroll(function(e)
    {
        scroll_Table_Header();
    });
});

---

享受

为什么不使用overflow-y？将指定的表格放在div标记中，给它一个高度限制，那么overflow-y可能会达到你想要的效果。有关更多信息以及我尝试过的方法，请参见上文。使用overflow-y时，你能发布CSS和html吗？