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個表將無法正確使用您想要的所需布局，因為每個單元格的寬度受單元格內容的影響，並且整個表的寬度將由每個單元格的width和height來獲得其布局 。

尋找不同的方法。