jquery浮动标题对齐问题

Question

我正在使用http://mkoryak.github.io/floatThead/浮动标题脚本，这似乎与用于宽度比屏幕宽度宽的表格有所不同。

然后当您向下滚动列和标题不再对齐。

我打电话使用脚本：

$(document).ready(function(){ 
    $("#my_table").sticky(); 

}); 

我创建这个FIDDLE这说明这个问题。在加载时，页面看起来很好，但只要开始滚动，对齐就消失了。

任何方式来解决这个问题？

我实际上使用的表格并不是很大，但它很大。我想减少列数，但对于这个特定的网站是不可能的。

UPDATE

我现在得到这个工作使用我在网上找到了一个例子。 NEW FIDDLE

我有2个轻微的滚动问题。

1. 使用鼠标滚轮滚动看起来有点生涩，特别是在标题中。
2. 滚动到页面底部，似乎强制部分滚动到页面的下部。

任何方式来解决这些问题？

小提琴显示第二个问题，但第一个问题并不像小提琴那样明显。

Answer 1

您可以在表标记中使用add和tbody来转移标题和数据。比定义CSS适当对齐。之后，你可以使用下面的代码为粘头：

jsFiddle Example

的jQuery：

$(document).ready(function() { 
    var theadH = $('thead').outerHeight(true); 
    $(window).scroll(function() { 
     var scrollVal = $(this).scrollTop(); 
     if (scrollVal > 0) { 
      $('thead').css({'position':'fixed'}); 
      $('tbody').css({'margin-top': theadH +'px'}); 
     } else { 
      $('thead').css({'position':'static'}); 
      $('tbody').css({'margin-top': '0px'}); 
     } 
    }); 
}); 

CSS：

table { width: 100%; } 
th,td { width: 20%; } /* there are five collums */ 
thead { top:0; } 

HTML：

<table cellpadding="0" cellspacing="0" border="0" width="100%"> 
    <thead> 
     <tr> 
      <th>ÜRÜN</th> 
      <th>ADEDİ</th> 
      <th>TUTAR</th> 
      <th>ÖDENEN TUTAR</th> 
      <th>MUALLAK TUTAR</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>90 - Dask</td> 
      <td>2</td> 
      <td>133</td> 
      <td>2347630</td> 
      <td>2347630</td> 
     </tr> 
     <tr> 
      <td>95 - Dask</td> 
      <td>4</td> 
      <td>140</td> 
      <td>234699</td> 
      <td>234699</td> 
     </tr> 
    </tbody> 
</table>