Html 启用可滚动JSF Primefaces 6.0时，标题未与列对齐

我正在使用PrimeFaces 6.0组件开发web。在…上

组件设置

scrollable=“true”

选项时，列标题对齐出错

以下是我的代码片段：

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

代码取自

附图清楚地显示了列标题和数据未正确对齐的问题

---

对于p:column，

width=“4%”

对我有效，而不是使用

'4px'

对于p:column，

width=“4%”

对我有效，而不是使用

'4px'
可能不是非常重要，但从你的表格风格开始，这很重要！应该是！导入并尝试删除表样式…@Kukeltje，我尝试了你的建议。现在列对齐似乎很好，但问题是我没有正确获取行数据。如果字符串大于列宽，则会将其剪切，剩余的字符串将变松。然后使用css包装内容可能不是非常重要，但仅供参考，以您的表格样式开始，重要！应该是！导入并尝试删除表样式…@Kukeltje，我尝试了你的建议。现在列对齐似乎很好，但问题是我没有正确获取行数据。如果字符串大于列宽，则会将其剪切，剩余的字符串将变松。然后使用css包装内容