启用可滚动时，标题与列不对齐 JSF Primefaces 6.0答案

【问题标题】：header not aligning with columns when scrollable enabled JSF Primefaces 6.0启用可滚动时，标题与列不对齐 JSF Primefaces 6.0
【发布时间】：2018-01-12 08:04:18
【问题描述】：

我正在使用 PrimeFaces 6.0 组件开发 Web。在 <p:dataTable> 组件当我们设置 scrollable="true" 选项时，列标题对齐出错。

以下是我的代码 sn-p:

<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

【问题讨论】：

可能不是超级重要，但仅供参考，在您的餐桌风格中，重要！应该是 !important
并尝试删除表格样式...
@Kukeltje，我尝试了你的建议。现在列对齐似乎没问题，但问题是我没有正确获取行数据。如果 String 大于列宽，它会剪切它并且剩余的字符串会松动。
然后用css包装内容

标签： html jsf primefaces jsf-2 datatable

【解决方案1】：

对于 p:column，width="4%" 对我有用，而不是使用 '4px'

【讨论】：