Primefaces重複標題，當我添加一個css規則

Question

我使用primefaces爲了建立一個datatable。問題是，當我嘗試對齊使用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> 

Answer 1

通常我不會取得好成績直接PrimeFaces組件應用CSS類，而使用一些選擇。

在這種情況下，您可以使用選擇器來編寫一些CSS類來覆蓋默認的PrimeFaces行爲。這裏有一個例子：

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

現在你可以直接申請對齊行爲上有用的列（在這種情況下，包括在工作列的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> 

最後，確保從styleClass中刪除jobsForm類。