t:dataTable scrollable with fixed headers

Question

I need to make my dataTable scrollable with fixed headers, I have seen few solutions like having 2 data Tables one for headers and the other for columns and one more solution is CSS
In the first solution the column widths in the both tables doesn't match( I think this can be fine tuned to have a fixed column size)
Can some one help me out in doing this with CSS.

Answer 1

I did some thing like this, please help me out my columns of botht ables doesn't match
<htm:table>
<htm:body>
<htm:tr>
<htm:td>
<t:div>
<t:div>
<t:dataTable
     renderedIfEmpty="false"
     preserveDataModel="false"
     preserveSort="true"
     varDetailToggler="detailToggler"
     headerClass="alignLeft"
     rowClasses="oddTableRow,evenTableRow"
     columnClasses="lastName,namePrefix,firstName,middleName,nameSuffix,dirType,orgName,county,city,state,valid,select"
     rows="1"
     value="#{result.result}"
     var="legalProfessional">
<t:column defaultSorted="false" sortable="true">
          <f:facet name="header">
               <h:outputText value="Last Name" style="font-size:8pt;" />
          </f:facet>
     </t:column>
     <t:column defaultSorted="false" sortable="true">
          <f:facet name="header">
               <h:outputText value="Name Prefix" style="font-size:8pt;" />
          </f:facet>
     </t:column>
     <t:column defaultSorted="false" sortable="true">
          <f:facet name="header">
               <h:outputText value="First Name" style="font-size:8pt;" />
</f:facet>
     </t:column>
     <t:column defaultSorted="false" sortable="true">
          <f:facet name="header">
               <h:outputText value="Middle Name" style="font-size:8pt;" />
          </f:facet>
     </t:column>
     <t:column defaultSorted="false" sortable="true">
          <f:facet name="header">
               <h:outputText value="Name Suffix" style="font-size:8pt;" />
          </f:facet>
     </t:column>
     <t:column >
          <f:facet name="header">
               <h:outputText value="Dir Type" style="font-size:8pt;" />
          </f:facet>
     </t:column>
     <t:column defaultSorted="false" sortable="true">
          <f:facet name="header">
               <h:outputText value="Organization Name" style="font-size:8pt;" />
          </f:facet>
               </t:column>
     <t:column defaultSorted="false" sortable="true">
          <f:facet name="header">
               <h:outputText value="County" style="font-size:8pt;" />
          </f:facet>
     </t:column>
     <t:column defaultSorted="false" sortable="true">
          <f:facet name="header">
               <h:outputText value="City" style="font-size:8pt;" />
          </f:facet>
     </t:column>
     <t:column defaultSorted="false" sortable="true">
          <f:facet name="header">
               <h:outputText value="State" style="font-size:8pt;" />
          </f:facet>
     </t:column>
     <t:column defaultSorted="false" sortable="true">
          <f:facet name="header">
               <h:outputText value="Valid" style="font-size:8pt;" />
          </f:facet>
     </t:column>
     <t:column rendered="#{resultPage eq resultsBean.pageSearch}" defaultSorted="false" sortable="true">
          <f:facet name="header">
               <h:outputText value="Select" style="font-size:8pt;" />
          </f:facet>
     </t:column>
</t:dataTable>
</t:div>
<t:div style="overflow:auto;height:50px">
<t:dataTable
     renderedIfEmpty="false"
     preserveDataModel="false"
     preserveSort="true"
     varDetailToggler="detailToggler"
     headerClass="alignLeft"
     rowClasses="evenTableRow,oddTableRow"
     columnClasses="lastName,namePrefix,firstName,middleName,nameSuffix,dirType,orgName,county,city,state,valid,select"
     rows="#{sessionUserBean.user.resultsPerPageOption}"
     value="#{result.result}"
     var="legalProfessional">
     <t:column defaultSorted="false" sortable="true">
          <h:outputText value="#{legalProfessional.lastName}" />
     </t:column>
     <t:column defaultSorted="false" sortable="true">
          <h:outputText value="#{legalProfessional.namePrefix}" />
     </t:column>
     <t:column defaultSorted="false" sortable="true">
          <h:outputText value="#{legalProfessional.firstName}" />
     </t:column>
     <t:column defaultSorted="false" sortable="true">
          <h:outputText value="#{legalProfessional.middleName}" />
     </t:column>
     <t:column defaultSorted="false" sortable="true">
          <h:outputText value="#{legalProfessional.nameSuffix}" />
     </t:column>
     <t:column >     
          <h:outputText value="#{legalProfessional.directoryType}" />
     </t:column>
     <t:column defaultSorted="false" sortable="true">
          <h:commandLink action="#{legalOrganizationSearchByNameBean.searchLegalOrganizationsByName}">
             <h:outputText value="#{legalProfessional.relatedOrgNormName}" />
               <t:updateActionListener property="#{legalOrganizationSearchByNameBean.name}" value="#{legalProfessional.organization}" />
              <t:updateActionListener property="#{legalOrganizationSearchByNameBean.resultKey}" value="#{legalOrganizationBean.legalOrganizationsSearchResultKey}" />               
          </h:commandLink>
     </t:column>
     <t:column defaultSorted="false" sortable="true">
          <h:outputText value="#{legalProfessional.county}" />
     </t:column>
     <t:column defaultSorted="false" sortable="true">
          <h:outputText value="#{legalProfessional.city}" />
     </t:column>
     <t:column defaultSorted="false" sortable="true">
          <h:outputText value="#{legalProfessional.normRegion}" />
     </t:column>
     <t:column defaultSorted="false" sortable="true">
          <t:graphicImage value="images/yellow_check.jpg" border="0" />
     </t:column>
     <t:column rendered="#{resultPage eq resultsBean.pageSearch}" defaultSorted="false" sortable="true">
          <t:commandButton
               id="viewLegalProfessionalCommand"
               forceId="true"
               title="#{bundle.view_entity_title}"
               value="#{bundle.text_view_value}"
               action="#{legalProfessionalBean.actionGotoView}">
               <t:updateActionListener property="#{heavyWeightBean.uuid}" value="#{legalProfessional.profileUuid}" />
               <t:updateActionListener property="#{legalProfessionalBean.LPAEntity}" value="#{legalProfessional}" />
          </t:commandButton>
     </t:column>
     <t:column rendered="#{pageStatus eq resultsBean.pageAdd || pageStatus eq resultsBean.pageEdit}">
          <!-- Employment relationship with general -->
          <t:commandButton
               title="Make Employment Relationship."
               rendered="#{result.key eq legalOrganizationBean.legalProfessionalsResultKey}"
               value="Employment"
               action="#{legalOrganizationBean.actionMakeEmploymentRelationship}">
               <t:updateActionListener property="#{legalOrganizationBean.selectedLPAEntity}" value="#{legalProfessional}" />
          </t:commandButton>
          </t:column>
</t:dataTable>
</t:div>
</t:div>
</htm:td>
</htm:tr>
</htm:body>
</htm:table>{.lastName{
width:100px;
.namePrefix{
width:100px;
.firstName{
width:100px;
.middleName{
width:100px;
.nameSuffix{
width:100px;
.dirType{
width:100px;
.orgName{
width:100px;
.county{
width:150px;
.city{
width:250px;
.state{
width:100px;
.valid{
width:100px;
.select{
width:100px;
code}