带固定列的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滚动功能并移动您想要的列＆＃34;冻结＆＃34;以相反的方式。 您还需要设置z-index，以使列保持在其他列之上。

在你的css中：

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

在您的信息页中：

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

Answer 2

您可以使用数据表：https://datatables.net/extensions/fixedcolumns/

基本上你有数据表作为它的依赖并使用这段代码：

$(document).ready( function () {
    var table = $('#example').DataTable( {
        "scrollY": "300px",
        "scrollX": "100%",
        "scrollCollapse": true,
        "paging": false
    } );
    new $.fn.dataTable.FixedColumns( table );
} );