javascript - 具有固定列的 HTML 表格

Question

我正在尝试固定表格的前 3 列，以便它们在水平滚动时始终显示。但是他们需要在垂直滚动时移动

我制作了一个 excel 表格，其中包含它需要做的事情:

我试过了http://jsfiddle.net/YMvk9/5294/

.headcol {
        position:absolute; 
        width:5em; 
        left:0;
        top:auto;
        border-right: 0px none black; 
        border-top-width:3px;
        margin-top:-3px;

使用右侧滚动条的 jquery 的 scrollTop，所以我移动了黄色单元格的顶部值。

当前的问题是，当我用数据库填充 html 表时，即使我的溢出是“滚动的”，也会显示黄色单元格，因为它们是绝对的。

见下图:

解决这个问题的任何方法。以便将它们隐藏起来？

或者我必须做的任何其他解决方案将不胜感激

Answer 1

您可以使用 JQUERY 滚动功能并以相反的方式移动您想要“卡住”的列。 您还需要设置 z-index，以便该列位于其他列之上。

在你的 CSS 中:

.frezedCell
{
    z-index: 1000;
    position:relative;
}

在您的页面中:

$(document).ready(function () {
    $(".divTableParts").scroll(function () {
         var divTable = $(".divTableParts");
        $(".frezedCell").css("left", 0 + divTable.scrollLeft());
    });
});