Jquery Floating Header Alignment Issue

Question

I'm using the floating header script from http://mkoryak.github.io/floatThead/ which seems to work apart from when used with a table who's width is wider than the screen.

Then when you scroll down the columns and header are no longer aligned.

I'm calling the script using :

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

});

I've created this FIDDLE which shows the issue. On load the page looks fine, but as soon as you start scrolling the alignment is gone.

Any way to resolve this ?

The table I'm actually working with isn't quite this large, but it is big..Ideally I'd like to reduce the number of columns, but for this specific site it's not possible.

UPDATE

I've now got this working using an example I found on-line. NEW FIDDLE

I have 2 slight scrolling issues.

Scrolling using the mouse wheel looks a bit jerky, especially in the header.
Scrolling to the bottom of the page and it seems to force a partial scrollup to the lower part of the page.

Any way to resolve those issue ?

The fiddle shows the 2nd issue, but the first issue isn't as obvious on the fiddle.

inspect this answer: http://stackoverflow.com/a/11983369/1428241 without plugin usage — Barlas Apaydin, Jul 10 '14 at 08:50
What is problem with this fiddle ? http://jsfiddle.net/cePkr/1/ — Pratik Joshi, Jul 10 '14 at 08:55
@BarlasApaydin thanks I can see that, but how do I implement that on a table header ? — MacMan, Jul 10 '14 at 09:14
@BarlasApaydin new fiddle at http://jsfiddle.net/cePkr/2/ using the code from your post. I've got it wrong as the header now appears in the middle of the table ! — Rocket, Jul 10 '14 at 09:30
@user214292 inspect my answer below mate: http://stackoverflow.com/a/24673389/1428241 — Barlas Apaydin, Jul 10 '14 at 09:53

score 0 · Answer 1 · answered Jul 10 '14 at 09:49

You can use thead and tbody in the table tag for diverting title and datas. Than define css for proper align. After that you can use the code below for sticky header:

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>

As soon as I start to scroll down the header alignment goes. Scroll back to the top the alignment is fine. — Rocket, Jul 10 '14 at 10:15
@user214292 than change you styles on css mate, there is nothing i can do about it /: — Barlas Apaydin, Jul 10 '14 at 12:59
the header alignment issue is shown on your fiddle. It's not my CSS. — Rocket, Jul 11 '14 at 07:52

Jquery Floating Header Alignment Issue

1 Answers1