Large Html Table With Fixed Header Inside Scrollable Div. How?

This problem has been bothering me for a while. Here are two fixed header html tables in the same page: Site 1 https://datatables.net/release-datatables/extras/FixedHeader/two_tabl

Solution 1:

You can go with easy and obvious way of putting headers in one DIV, and then the rows in another div. The div containing rows would have fixed height and overflow set to scroll/auto

You can also write a quick function doing this for you with jQuery

functionfixedHeader(table)
{
    var header = table.find("thead").html();
    var body = table.find("body").html();
    // add <table> tags to both header and body or the containers
    $("#yourHeaderContainer").html(header);
    $("#yourContentContainer").html(body);
    table.hide();
}

it's of course not complete solution and just one of many ways - but I guess it will give you food for though