How to fix column header in displaytag table

Question

I have created a table using displaytag. I want to make the table header or column headers fixed and only the body of the table should be scrolled.I am able to make the div containing the table as scrollable. But when scrolling the header of the table also scrolls. It does not remain fixed.I tried some ways. But I did not get any luck.Could anyone help me with this? Thanks in advance.

My code:

<div id="ratesTableDiv" style="overflow-y: auto;height:250px;" >
                <display:table class="tablesorter" export="false" id="data" class="displayTableBorder"
                    summary="This is the only table in the rates tab. It has the rates data for the selected plan." style="width:700px;" 
                    name="PlanSummaryDTO.planRateList" uid="rates" rules="rows"
                    requestURI="PlanSummary"
                    decorator="com.cgi.hix.web.decorators.PortalHomePlansDecorator">
                    <display:setProperty name="paging.banner.placement" value="bottom" />
                    <display:setProperty name="basic.empty.showtable" value="true" />
                    <display:setProperty name="paging.banner.onepage" value="" />
                    <display:setProperty name="paging.banner.no_items_found" value="" />
                    <display:setProperty name="paging.banner.one_item_found" value="" />
                    <display:setProperty name="paging.banner.all_items_found" value="" />
                    <display:setProperty name="paging.banner.some_items_found" value="" />
                    <display:setProperty name="paging.banner.group_size" value="5" />
                    <display:setProperty name="paging.banner.full"
                        value='<p><span id="hix-pagination"><span> <a id="doublePrevRates" class="prev" href="{1}">&#9668;&#9668;</a> <a id="singlePrevRates" class="prev" href="{2}">&#9668;</a> {0} <a id="singleNextRates" class="next" href="{3}">&#9658;</a> <a id="doubleNextRates" class="next" href="{4}">&#9658;&#9658; </a></span></span></p>' />
                    <display:setProperty name="paging.banner.first"
                        value='<p><span id="hix-pagination"><span> <a id="doublePrevRates" class="prev" href="{1}">&#9668;&#9668;</a> <a id="singlePrevRates" class="prev" href="{2}">&#9668;</a> {0} <a id="singleNextRates" class="next" href="{3}">&#9658;</a> <a id="doubleNextRates" class="next" href="{4}">&#9658;&#9658; </a></span></span></p>' />
                    <display:setProperty name="paging.banner.last"
                        value='<p><span id="hix-pagination"><span> <a id="doublePrevRates" class="prev" href="{1}">&#9668;&#9668;</a> <a id="singlePrevRates" class="prev" href="{2}">&#9668;</a> {0} <a id="singleNextRates" class="next" >&#9658;</a> <a id="doubleNextRates" class="next" >&#9658;&#9658; </a></span></span></p>' />
                    <display:caption media="html" class="captionHide">Rates</display:caption>
                    <display:setProperty name="paging.banner.page.separator"
                        value=" | " />
                    <display:setProperty name="paging.banner.group_size" value="4" />
                    <display:column property="age" scope="colgroup" headerScope="colgroup" title="${age}"
                        headerClass="hixTableHeader "
                        style="width: 10%;align: center;" class="displayTagtd" />
                    <display:column property="usesTobacco" scope="colgroup" headerScope="colgroup" title="${tobacco}"
                        headerClass="hixTableHeader" style="width: 30%;align: center;"
                        class="displayTagtd" />
                    <display:column property="rateAreaId" scope="colgroup" headerScope="colgroup" title="${ratingArea}"
                        headerClass="hixTableHeader" style="width: 15%;align: center;"
                        class="displayTagtd" />
                    <display:column property="rateAmount" scope="colgroup" headerScope="colgroup" title="${individualRate}"
                        headerClass="hixTableHeader"
                        style="width: 20%;align: center;" class="displayTagtd" />
                    <display:column property="individualTobaccoRate" scope="colgroup" headerScope="colgroup" title="${individualTobaccoRate}"
                        headerClass="hixTableHeader"
                        style="width: 30%;align: center;" class="displayTagtd" />
                </display:table>
    </div>

Using a div and setting the overflow-y and height, I am able to get a scrollbar. But the header of the table also scrolls.How can the header be made fixed?

I tried the following code :

Now the header is fixed and it does not scroll with the body. But the width of the each column header differs from the width of the each column body.Is there any way to resolve this?

$(document).ready(function() 
 {       scrolify($('#ratesTableDiv'), 250);
});

function scrolify(tblAsJQueryObject, height){
    var oTbl = tblAsJQueryObject;

    // for very large tables you can remove the four lines below
    // and wrap the table with <div> in the mark-up and assign
    // height and overflow property  
    var oTblDiv = $("<div/>");
    oTblDiv.css('height', height);
    oTblDiv.css('overflow-y','scroll');               
    oTbl.wrap(oTblDiv);

    // save original width
    oTbl.attr("data-item-original-width", oTbl.width());
    oTbl.find('thead tr td').each(function(){
        $(this).attr("data-item-original-width",$(this).width());
    }); 
    oTbl.find('tbody tr:eq(0) td').each(function(){
        $(this).attr("data-item-original-width",$(this).width());
    });                 


    // clone the original table
    var newTbl = oTbl.clone();

    // remove table header from original table
    oTbl.find('thead tr').remove();                 
    // remove table body from new table
    newTbl.find('tbody tr').remove();   

    oTbl.parent().parent().prepend(newTbl);
    newTbl.wrap("<div/>");

    // replace ORIGINAL COLUMN width                
    newTbl.width(newTbl.attr('data-item-original-width'));
    newTbl.find('thead tr td').each(function(){
        $(this).width($(this).attr("data-item-original-width"));
    });     
    oTbl.width(oTbl.attr('data-item-original-width'));      
    oTbl.find('tbody tr:eq(0) td').each(function(){
        $(this).width($(this).attr("data-item-original-width"));
    });                 
}

Answer 1

Found the solution: I used dataTable jquery to do this.

First I set table-layout:fixed for the table.

Then added following code in js:

$("#rates").dataTable({
     "bPaginate": false,
    "sScrollY": "250px",
     "bAutoWidth": false,
     "bScrollCollapse": true,
    "sScrollX": "100%",
       "sScrollXInner": "100%",
            "bLengthChange": false,
            "bFilter":   false,
            "sDom": '<"top">rt<"bottom"flp><"clear">',
            "aoColumns": [
                          { "bSortable": false, "sWidth" : "10%" },
                          { "bSortable": true, "sWidth" : "30%" },
                          { "bSortable": true, "sWidth" : "15%" },
                          { "bSortable": true, "sWidth" : "20%" },
                          { "bSortable": true, "sWidth" : "30%" }
                          ],



}).fnAdjustColumnSizing( false );

Answer 2

to fixed theader and see tbody scrolling can basicly be achieve setting: tbody {display:block;height:XX;overflo:scroll;} But you loose cell alignements in between thead and tbody.

You can tune this with classes and eventually clone a footer. if your header has some colspans, this option should be better.

Have a look at: http://codepen.io/gcyrillus/pen/aJysI for scrolling table withheader(footer) fixed. Playing around with code, i'm sure you'll understand the use. :)