keeping the header fixed in datatable while allowing its contents to scroll
- by Sunny Mate
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.