Question

我正在使用PrimeFaces 6.0组件开发Web。上我们设置<p:dataTable>选项时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>

代码来自https://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml

附加图像清楚地显示了问题，因为列标题和数据未正确对齐。

Image link

Answer 1

对于 p：列，width="4%"适合我，而非使用'4px'

当可滚动的JSF Primefaces 6.0时，标题与列不对齐

1 个答案: