Question

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

我一直在网上寻找一些简单的东西，但我找不到任何可以满足这两种条件的东西。

编辑：我以一种可能更清楚的方式重申我的问题 - 我希望用现有的html表改变现有的html文件，以便第一行垂直固定，但与主体水平滚动。我无法控制这些html文件最初是如何制作的，所以我必须通过python添加任何样式，以获得我想要的输出。在我看来，只有一个滚动条。可以这样做吗？有人有想法吗？

提供更多信息：我尝试了很多选项，包括尝试为第一行添加一个css类，并使用overflow-y以及使用多个div。我宁愿用css格式解决这个问题，因为修改css文件可能比使用python更容易完成，而不是在已经制定的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();
    });
});

享受

冻结顶行（向上/向下）在表格中并允许向左/向右滚动

1 个答案: