javascript - 可滚动的主体问题

Question

: )

我知道这个问题已经被问了很多，但我尝试了很多解决方案，但无法使其正常工作。

我需要使我的表的 tbody 可以滚动，并带有固定的标题。

首先，我的表是动态构建的，而且非常大。 19 列和大约 800 行。

首先，我使用了 jquery 数据表插件。表格进入容器后:

var tbl = createFilter('readDataTbl', '', condition);
    $('#tableDiv').empty().append(tbl);

    $('#readDataTbl').dataTable({
        "scrollY": "200px",
        "scrollCollapse": true,
        "paging": false
    });

但这会在 x 中创建一个滚动条并且标题会像这样卡住:

然后我尝试了如下的css解决方案:

 <style>
        table {
    border-collapse: collapse;
    width: 100%;
}
thead {
    text-align:left;
    display: table;
    float: left;
    width: 100%;
}
thead tr {
    display: table-row;
    width: 100%;
}
tbody {
    display: block;
    height: 120px;
    overflow: auto;
    float: left;
    width: 100%;
}
tbody tr {
    display: table;
    width: 100%;
}
tbody tr {
    height: 18px;
}
tbody td {
    padding:1px 8px;
}
th, td {
    width: 25%;
}

tr:after{   /* IE8 fix */
    content: ".";
    margin-left: -3px; /* to hide the content above tr */ /* not necessary if you are ok with 1px gap */
    visibility: hidden;
}
     </style>

但这只会在 tbody 中造成困惑:

然后我尝试了来自 Here 的方法在以下之后调整 THs 宽度:CSS:

<style>
        thead, tbody { display: block; }

        tbody {
            height: 100px;       /* Just for the demo          */
            overflow-y: auto;    /* Trigger vertical scroll    */
            overflow-x: hidden;  /* Hide the horizontal scroll */
        }
     </style>

js:

var tbl = createFilter('readDataTbl', '', condition);
    $('#tableDiv').empty().append(tbl);

    var $table = $('table');
    var $bodyCells = $table.find('tbody tr:first').children();
    

    // Get the tbody columns width array
    var colWidth = $bodyCells.map(function () {
        return $(this).width();
    }).get();

    // Set the width of thead columns
    $table.find('thead tr').children().each(function (i, v) {
        $(v).width(colWidth[i]);
    });

然后我注意到 THs 长文本使它们变得更大:

什么可以帮助我实现目标？考虑过在 THs 中插入 div 但不确定..

谢谢! : ]

Answer 1

如果没有一些 javascript，您将无法完美地做到这一点。实现此目的的最佳方法是使用标题的克隆，将其添加到元素之前，在其上应用固定位置并隐藏原始内容。希望这可以帮助。您可能还需要将每个列宽绑定(bind)到原始宽度。