En-tête ne s'alignant pas avec les colonnes lorsque défilable activé JSF Primefaces 6.0

Question

Je développe le Web en utilisant les composants PrimeFaces 6.0. Sur <p:dataTable> lorsque l'option scrollable="true" est définie, l'alignement des en-têtes des colonnes est incorrect.

Après est mon extrait de code:

<p:fieldset legend="Machine Test Match" id="panel233" toggleable="true" toggleSpeed="500" > 
      <!--<p:panel id="panel233" header=" Machine Test Match" style="height:325px;border: none">--> 
      <p:dataTable id="testmatchtable" var="testMatchvalues" value="#{manufactureBean.listTestMatchata}" filteredValue="#{manufactureBean.filteredManufacture}" editable="true" 
         styleClass="mystyle" tableStyle="table-layout:auto;width:100% important!;" rowKey="#{testMatchvalues.testId}" scrollRows="10" scrollable="true" scrollHeight="230" rows="40" liveScroll="true"  selection="#{manufactureBean.testMatchModel}" selectionMode="single"       resizableColumns="true"  > 


       <p:column headerText="Test ID" filterBy="#{testMatchvalues.testId}" filterMatchMode="contains" style="width:35px"> 
        <h:outputText value="#{testMatchvalues.testId}" /> 
       </p:column> 

       <p:column headerText="Test Desc" filterBy="#{testMatchvalues.testDesc}" filterMatchMode="contains" style="width:35px" > 
        <h:outputText value="#{testMatchvalues.testDesc}" /> 
       </p:column> 


       <p:column headerText="Specimen Desc" filterBy="#{testMatchvalues.specimenDesc}" filterMatchMode="contains" style="width:35px" > 
        <h:outputText value="#{testMatchvalues.specimenDesc}" /> 
       </p:column> 
       <p:column headerText="Path Test Desc" filterBy="#{testMatchvalues.pathTestDesc}" filterMatchMode="contains" style="width:35px"> 
        <h:outputText value="#{testMatchvalues.pathTestDesc}" /> 
       </p:column> 
       <p:column headerText="Path Param Name" style="width:35px" filterBy="#{testMatchvalues.parameterName}" filterMatchMode="contains"> 
        <h:outputText value="#{testMatchvalues.parameterName}" /> 
       </p:column> 
       <p:column headerText="Additional Factor" style="width:35px" > 
        <h:outputText value="#{testMatchvalues.additionFactor}" /> 
       </p:column> 
       <p:column headerText="Multiply Factor" style="width:35px"> 
        <h:outputText value="#{testMatchvalues.multiplyFactor}" /> 
       </p:column> 
       <p:column headerText="Machine Host Code" style="width:35px"> 
        <h:outputText value="#{testMatchvalues.machineHostCode}" /> 
       </p:column> 
       <p:column headerText="Active" style="width:35px"> 
        <h:outputText value="#{testMatchvalues.active}" /> 
       </p:column> 
      </p:dataTable> 
      <!--</p:panel>--> 
     </p:fieldset> 

code tiré de https://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml

l'image ci-joint montre clairement le problème des en-têtes de colonne et les données n'est pas alignée correctement.

Image link

Answer 1

Pour p: colonne, width="4%" fonctionne pour moi plutôt que d'utiliser '4px'