具有固定列的 Html 表答案

【问题标题】：Html table with fixed columns具有固定列的 Html 表
【发布时间】：2014-12-31 18:43:12
【问题描述】：

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

我用它需要做的事情做了一个 excel 表：

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

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

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

查看下一张图片：

解决此问题的任何方法。所以他们被隐藏了？

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

【问题讨论】：

我在同样的问题上跑过一次，结果我非常不知所措，以至于我决定使用 3 个表格：1 个用于标题，1 个用于固定列，1 个用于可滚动列，所有这些包裹在具有不同属性的 div 上。
我宁愿将它保存在一个表中，因为我将那个表发送到一个函数，该函数将一个表导出为 excel、word、pdf。
不确定您当前的 HTML 结构是否可行。您是否考虑过使用插件？有很多优秀的 jQuery 数据表类型插件。例如，stackoverflow.com/questions/5622716/…
这就是为什么我只是评论而不是回答的原因。但是，您可以在将数据发送到函数之前对其进行编译。我不认为有问题。如果没有人给你答案，你会在某个时候这样做。我希望不会是这样。还有一些插件可以做到这一点，但我必须承认我不是其中任何一个的忠实粉丝：jquery.fixedHeaderTable 和 jscrollpane。
我知道。但我不得不说我还在寻找答案。

标签： javascript jquery html css

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

【讨论】：

试过了，它在谷歌浏览器中就像一个魅力，但 IE 刷新速度很慢，所以它滞后，但它做了我想要它做的事情。接受:)

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

【讨论】：