title: keeping the header fixed in datatable while allowing its contents to scroll
body: <p>I have a table with header and data. When I am scrolling the header is also getting scrolled my code is as follows:</p>
  
  <pre><code>&lt;div style="height:200px;overflow-x:auto;overflow-y:scroll;"&gt;
      &lt;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"&gt;
          &lt;h:column id="userNameColumn"&gt;
              &lt;f:facet name="header"&gt;
                  &lt;h:outputLink id="userNameColumnLink" styleClass="Header" value="#" onclick="refreshUserGrid('DISPLAYNAME')"&gt;
                      &lt;h:outputText id="userNameColID" styleClass="outputText" value="User"/&gt;
  </code></pre>
  
  <p>Any suggestion would be helpful.</p>