jsf - Primefaces duplicate header when i add a css rule -

i use primefaces in order build datatable. problem when try align header whith columns using css rule (float: left) header row duplicated. question why happens , how can solved. below have code , snapshoot of duplicated table header.

<h:form id="jobsform" styleclass="jobsform">         <p:datatable id="jobsdatatable" var="jobs" scrollable="true"                      value="#{jobsbean.getjoblist()}" selectionmode="single"                      widgetvar="jobs" rowkey="#{jobs.id}" styleclass="jobstable">             <p:column id="jobid" styleclass="jobcolumn" sortby="#{jobs.id}">                 <f:facet id="idfacet" name="header">                     <h:outputtext styleclass="jobtext" id="idlabel" value="#{msg.job_id}"/>                 </f:facet>                 <h:outputtext id="id" value="#{jobs.id}" />             </p:column>             <p:column id="jobtitle" styleclass="jobcolumn" sortby="#{jobs.id}">                 <f:facet id="titlefacet" name="header">                     <h:outputtext styleclass="jobtext" id="titlelabel" value="#{msg.job_title}"/>                 </f:facet>                 <h:outputtext id="title" value="#{jobs.title}"/>             </p:column>             <p:column id="jobstate" styleclass="jobcolumn" sortby="#{jobs.status}">                 <f:facet id="titlefacet" name="header">                     <h:outputtext styleclass="jobtext" id="statuslabel" value="#{msg.job_status}"/>                 </f:facet>                 <h:outputtext id="status" value="#{jobs.status}"/>             </p:column>             <p:column id="jobstartdate" styleclass="jobcolumn" sortby="#{jobs.start_date}">                 <f:facet id="startfacet" name="header">                     <h:outputtext styleclass="jobtext" id="startlabel" value="#{msg.job_start}"/>                 </f:facet>                 <h:outputtext id="start" value="#{jobs.start_date}"/>             </p:column>             <p:column id="jobenddate" styleclass="jobcolumn" sortby="#{jobs.start_date}">                 <f:facet id="endfacet" name="header">                     <h:outputtext styleclass="jobtext" id="endlabel" value="#{msg.job_end}"/>                 </f:facet>                 <h:outputtext id="end" value="#{jobs.end_date}"/>             </p:column>         </p:datatable>     </h:form> 

usually don't results applying css classes directly on primefaces components without using selectors.

in case can write css classes using selectors override default primefaces behavior. here's example:

.ui-datatable thead tr th.align-left, .ui-datatable tbody tr td.align-left {     text-align: left; } 

now can apply align behavior directly on wanted column (in case, including 'align-left' on job column styleclass):

    <p:datatable id="jobsdatatable"                   var="jobs"                   scrollable="true"                  value="#{jobsbean.getjoblist()}"                   selectionmode="single"                  widgetvar="jobs"                   rowkey="#{jobs.id}"                   styleclass="jobstable">         <p:column id="jobid"                   styleclass="jobcolumn align-left"                   sortby="#{jobs.id}">             <f:facet id="idfacet" name="header">                 <h:outputtext styleclass="jobtext" id="idlabel" value="#{msg.job_id}"/>             </f:facet>             <h:outputtext id="id" value="#{jobs.id}" />         </p:column>     </p:datatable> 

lastly, make sure remove jobsform class styleclass.