keeping the header fixed in datatable while allowing its contents to scroll

Question

I have a table with header and data. When I am scrolling the header is also getting scrolled my code is as follows:

<div style="height:200px;overflow-x:auto;overflow-y:scroll;">
    <h:dataTable cellpadding="0" cellspacing="0" border="0" width="60%"
        headerClass="HeaderCellSorted" columnClasses="DataCell" rowClasses="OddRow,EvenRow" styleClass="SearchResults" footerClass="FooterCell" 
        id="userListTable" value="#{pc_WorkInProgressUserGrid.userGridModel.rebalanceByUserList}" var="userGridDO">
        <h:column id="userNameColumn">
            <f:facet name="header">
                <h:outputLink id="userNameColumnLink" styleClass="Header" value="#" onclick="refreshUserGrid('DISPLAYNAME')">
                    <h:outputText id="userNameColID" styleClass="outputText" value="User"/>

Any suggestion would be helpful.

Answer 1

This is in fact an easy task with CSS:

tbody {
    height: 200px; /* Just some fixed height */
    overflow: scroll;
}

But a certain widely used webbrowser developed by a team in Redmond doesn't support the overflow property on the tbody element. So you're really stuck and you'll need to head to hacky HTML+CSS and/or Javascript based solutions.

• Google: "scrollable table with fixed header"
• Stackoverflow: "scrollable table with fixed header"

There's by the way also a jQuery plugin.

Answer 2

If you are able to use RichFaces, they offer the ExtendedDataTable which has the functionality you're looking for. See http://livedemo.exadel.com/richfaces-demo/richfaces/extendedDataTable.jsf.