Sticky header for WebGrid in MVC

Question

I'm making an admin app using web grid where users can view tables I pull from a database and display using a WebGrid.

Right now I'm trying to have a sticky header in the webGrid. The jQuery methods I found all involve setting the header "position" in CSS to "fixed". However, every time I do this all of the columns in the header are on top of each other, like every column is moved on top of the first column.

this is the script for the jquery function i was going to use:

<SCRIPT>
$(document).ready(function() {

    var div = $('#th');
    var start = $(div).offset().top;

    $.event.add(window, "scroll", function() {
        var p = $(window).scrollTop();
        $(div).css('position',((p)>start) ? 'fixed' : 'static');
        $(div).css('top',((p)>start) ? '0px' : '');
    });

});
</SCRIPT>

and here is the CSS for the grid, although i haven't done much with it:

<style>
    table
    {
        text-align: center;        
    }

    th
    {
        background-color: lightgreen;
    }
</style>

First of all, is the method I am using the right approach to this task? Also, how can I fix the issue with the header?

Answer 1

I've given up with that approach. I just accept I have to have two tables - one for the header, one for the content. In the PreRender event of both grids I set the columns to a percentage width and they line up perfectly.