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

【问题标题】：Freeze Top Row (up/down) In Table and Allow Scroll left/right冻结表中的第一行（上/下）并允许向左/向右滚动
【发布时间】：2014-09-21 12:59:17
【问题描述】：

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

我一直在网上搜索一些简单的东西，但我没有找到任何可以同时满足这两种情况的东西。

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

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

我想保持第一行看起来相同，但只是垂直固定，并允许它与其余行水平滚动。

【问题讨论】：

为什么不使用overflow-y？将 detialed 表放在 div 标签中给它一个高度限制，然后溢出-y 可能会达到你想要的效果。
有关更多信息以及我对您的方法所做的尝试，请参见上文。
你可以在使用overflow-y时发布你的CSS和html吗？

标签： javascript html scroll html-table row

【解决方案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();
    });
});

享受

【讨论】：