Let me explain as to how this could be done.

Steps

1. Find your table header, and save its position


2. Add a listener to the window's scroll event.


3. Check the window scroll against your table header position
   
   
   
   1. If the position < window scroll - add a class to fix the table header
   
   
   2. Else, reset the css to behave like a normal header.
   
   

I've posted a fiddle that you can find here.

Code sample

HTML

<div class='lots_of_stuff_in_here'> ... </div>

<table>

    <thead id='my_fixable_table_header'>

        <tr>

            <th>My awsesome header number 1</th>

            <th>My awsesome header number 2</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Content</td>

            <td>Content</td>

        </tr>

        // much more content

    </tbody>

</table>

Javascript

// Just so you get the idea behind the code



var myHeader = $('#my_fixable_table_header');

myHeader.data( 'position', myHeader.position() );

$(window).scroll(function(){

    var hPos = myHeader.data('position'), scroll = getScroll();

    if ( hPos.top < scroll.top ){

        myHeader.addClass('fixed');

    }

    else {

        myHeader.removeClass('fixed');

    }

});



function getScroll () {

    var b = document.body;

    var e = document.documentElement;

    return {

        left: parseFloat( window.pageXOffset || b.scrollLeft || e.scrollLeft ),

        top: parseFloat( window.pageYOffset || b.scrollTop || e.scrollTop )

    };

}

​