Jsf 当我添加css规则时，Primefaces重复标题

我使用primefaces来构建数据表。问题是，当我尝试使用css规则（float:left）将标题与列对齐时，标题行被复制。 问题是为什么会发生这种情况以及如何解决。 下面是代码和复制表标题的快照

<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>

---

通常，如果不使用一些选择器，直接在PrimeFaces组件上应用CSS类不会获得好的结果

在这种情况下，您可以使用选择器编写一些CSS类来覆盖默认的PrimeFaces行为。下面是一个例子：

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

现在，您可以直接在所需列上应用对齐行为（在本例中，包括作业列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 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>