jquery festen Tabellenkopf auf Scroll

Question

ich eine Datentabelle haben diese Tabelle seine Daten aus mysql Datenbank lesen

Ich benutze diese jquery und CSS zu festen Header der Tabelle auf Scroll

;(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> 

Das Problem ist, wenn ich die Änderung Spaltenbreite nach unten scrollen und dem Titel in dem Kopf

012.351 nicht den Inhalt des Tischkörpers entsprechen

Sie können unter

dies der Code auf https://fiddle.jshell.net/mhmd2991/oy764es6/12/

in der Verbindung überprüfen Wie kann ich ?? fixiert !!

Answer 1

Die Trennung des Inhalts in 2 Tabellen funktioniert nicht korrekt mit dem gewünschten Layout, da die Breite jeder Zelle durch den Inhalt der Zelle beeinflusst wird, und die gesamte Tabellenbreite wird durch die Breite und Breite jeder Zelle definiert Höhe.

Suchen Sie nach anderen Ansatz.