凍結表中的第一行（上/下）並允許向左/向右滾動

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

請享用