Primefaces duplicate header when i add a css rule - jsf

Question

I use primefaces in order to build a datatable. The problem is that when i try to align the header whith the columns using a css rule (float: left) then the header row is duplicated.
The question is why this happens and how it can be solved.
Below i have the code and a snapshoot of the 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>

Answer 1

Usually I don't get good results applying CSS classes directly on PrimeFaces components without using some selectors.
In this case you can write some CSS classes using selectors to override the default PrimeFaces behavior. Here's a example:
.ui-datatable thead tr th.align-left,
.ui-datatable tbody tr td.align-left {
text-align: left;
}
Now you can apply the align behavior directly on the wanted column (in this case, including 'align-left' on the 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 to remove the jobsForm class from the styleClass.