jquery在滚动时固定表头

Question

我有一个数据表这个表从mysql数据库中读取他的数据

我使用这个 jquery 和 css 来修复滚动表的标题

;(function($) {
   $.fn.fixMe = function() {
      return this.each(function() {
         var $this = $(this),
            $t_fixed;
         function init() {
            $this.wrap('<div class="table-responsive" />');
            $t_fixed = $this.clone();
            $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
            resizeFixed();
         }
         function resizeFixed() {
            $t_fixed.find("th").each(function(index) {
               $(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
            });
         }
         function scrollFixed() {
            var offset = $(this).scrollTop(),
            tableOffsetTop = $this.offset().top,
            tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
            if(offset < tableOffsetTop || offset > tableOffsetBottom)
               $t_fixed.hide();
            else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))
               $t_fixed.show();
         }
         $(window).resize(resizeFixed);
         $(window).scroll(scrollFixed);
         init();
      });
   };
})(jQuery);

$(document).ready(function(){
   $("table").fixMe();
   $(".up").click(function() {
      $('html, body').animate({
      scrollTop: 0
   }, 2000);
 });
});

HTML：

<div class="table-responsive" >
    <table class='ol-md-12 table-bordered table-striped table-condensed cf table-bordered'>
        <thead class='cf'>
            <tr>
                <th rowspan='2'>#</th>
                <th rowspan='2'>Staff
                </th>
                <th rowspan='2'>MyTask</th>
                <th rowspan='2'>Status</th>
                <th rowspan='2'>Description</th>
                <th rowspan='2'>transfered</th>
                <th colspan='3'>Planning</th>
                <th rowspan='2'>Date
                </th>
                <th rowspan='2'>Project</th>
                <th rowspan='2'>Type</th>
                <th rowspan='2'>Frequency</th>
                <th rowspan='2'>Priority</th>
                <th rowspan='2'>Note</th>

            </tr>
            <tr>
                <th> Start Date</th>
                <th> Due Date</th>
                <th>Duration</th>
            </tr>
        </thead>

问题是当我向下滚动列宽变化并且标题中的标题与表格正文的内容不匹配时

您可以在下面的链接中查看

这是https://fiddle.jshell.net/mhmd2991/oy764es6/12/上的代码

我该如何解决？？！！

Answer 1

将内容分成 2 个表格将无法使用您想要的布局正常工作，因为 每个单元格的宽度受单元格内容的影响，并且整个表格宽度通过每个单元格的宽度获得其布局和高度。

寻找不同的方法。