Question

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

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

我正在使用：

调用脚本

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

});

我已经创建了 FIDDLE 来显示问题。在加载时，页面看起来很好，但是一旦开始滚动，对齐就会消失。

有什么方法可以解决这个问题？

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

更新

我现在使用我在网上找到的一个例子。 NEW FIDDLE

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

使用鼠标滚轮滚动看起来有点不稳定，特别是在标题中。
滚动到页面底部，它似乎强制部分滚动到页面的下半部分。

有任何方法可以解决这些问题吗？

这个小提琴显示了第二个问题，但第一个问题在小提琴上并不那么明显。

Answer 1

您可以在表格标签中使用thead和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>

Jquery浮动标题对齐问题

1 个答案: