冻结表中的第一行（上/下）并允许向左/向右滚动

Question

我有一些HTML宽表，这些表需要在浏览器中向左/向右滚动才能查看。 我想垂直放置第一行，同时允许其向左/向右滚动。

我一直在网上搜寻一些简单的内容，但没有找到可以同时满足这两个条件的任何内容。

编辑：我以一种可能更清晰的方式重申了我的问题-我想用现有的html表更改现有的html文件，以便第一行垂直固定，但与正文水平滚动。 我无法控制这些html文件的最初制作方式，因此我必须求助于添加可以通过python进行的任何样式，以便获得所需的输出。 在我看来，只有一个滚动条。 能做到吗？ 有人有主意吗？

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

我想保持第一行的外观不变，只是垂直固定，并使其与其余行水平滚动。

Answer 1

我能够解决我的问题，并在此处发布解决方案，以防其他人正在使用excel输出的网页（或一般而言是任何预定的html表），并且想使第一行（或任何给定的行）垂直冻结但水平滚动。 该解决方案依赖于javascript / jquery / CSS并实现了Saechel提出的解决方案中讨论的两个div方法（我不需要页脚）。 我几乎尝试了每种方法，这是唯一令人满意的方法：

CSS文件包括以下内容：

#header { position: fixed;}

javascript文件包括以下内容：

$(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();
    });
});

请享用