javascript - 具有固定标题和滚动的表

我正在处理HTML表，所有数据都来自后端，并且有大量的列，超过80个。我的要求是表标题将是固定的并且可以滚动。我尝试了很多事情，但是没有用。我在与我的页面其他js冲突的地方尝试了多个jquery插件。
因此，我正在考虑编写普通的js，但它也不起作用。
请帮帮我。

这是我的JavaScript代码

var resizeCol = function () {
    var tiw = $('.table-body .table').width();
    $('.table-head').width(tiw);
    $('.table-body .table tr:first td').each(function (index, element) {
        var w = $(this).width(),
            i = $(this).index();
        $('.table-head th:eq(' + i + ')').width(w);
    });
}
resizeCol();
$(window).on("resize", function () {
    resizeCol();
});

var scrollTarget = function () {
    var target = $(".table-header");
    $(".table-body").scroll(function () {
        target.prop("scrollLeft", this.scrollLeft);
    });
}



$tableInner = $('.table-body');
$tableInner.attr('style', 'overflow: auto; width: auto; height: 300px');

resizeCol();
scrollTarget();

DEMO

最佳答案

试试这个代码

var resizeCol = function () {
   var body=$('.template_table').clone();
   body.addClass('body');
   $('.table-wrapper').append("<div class='table-body'></div>");
      $("table:first-child").wrap("<div class='table-head-scroll'></div>");
   $('.table-body').append(body);
   var curr = [];
   $("table.body th").each(function(i) {
                var tColumnWidth = $(this).width();
                curr.push(tColumnWidth);
   });
   $("table:first-child th").each(function(i){
        $(this).width(curr[i]);
   });
   $("table.body td").each(function(i) {
            $(this).width(curr[i]);
   });
   $("table.body thead").hide();
   $("table").css('width','100%');
     $(".table-head-scroll>table tbody").empty();
}
var scrollTarget = function () {
    var target = $(".table-head-scroll");
    $(".table-body").scroll(function () {
        target.prop("scrollLeft", this.scrollLeft);
    });
}
$(window).on("resize", function () {
    resizeCol();
});
$(document).ready(function(){
resizeCol();
scrollTarget();
});

DEMO