PrimeFaces多数据表样式异常：仅最后一个表格应用列宽设置

你的问题核心是widgetVar重复导致JS组件覆盖：PrimeFaces的widgetVar是全局变量，多个表格用同一个widgetVar值时，后面的表格会覆盖前面的，使得第一个表格的JS初始化逻辑失效，列宽、可调整列等功能都无法正常工作。

具体修复步骤 #

• 给每个p:dataTable设置唯一的widgetVar，比如第一个用widgetVar="Tb1"，第二个用widgetVar="Tb2"
• 检查表格内的组件ID（比如wName、viewW），虽然JSF会自动通过父组件ID生成唯一客户端ID（如tbWList:wName），但如果有自定义JS依赖这些ID，最好也保证它们在每个表格内唯一
• （可选）如果列宽设置不稳定，可以改用CSS类控制列宽，比如给列加styleClass="fixed-width-100"，然后在样式表中定义：

.fixed-width-100 {
    width: 100px !important;
}

修改后的代码示例 #

第一个表格：

<p:dataTable widgetVar="Tb1" id="tbWList" var="row"
             value="#{aBean.items}" rowKey="#{row.itemId}"
             scrollable="true" emptyMessage="No Item."
             resizableColumns="true" style="width:100%;"
             filteredValue="#{aBean.filteredItemList}">
             
    <p:column>
        <f:facet name="header">
            <h:outputText value="NAME"  style="float:left;"/>
        </f:facet>
        <h:outputText id="wName" value="#{row.name}">
            <p:tooltip for="wName" value="#{row.name}" />
        </h:outputText>
    </p:column>
    <p:column width="100">
        <f:facet name="header">
            <h:outputText value="VIEW" />
        </f:facet>
        
        <h:commandLink id="viewW"
                       action="#{aBean.actionS(row.itemId,row)}"
                       styleClass="myStyle" />
    </p:column>
    <f:facet name="footer"></f:facet>
</p:dataTable>

第二个表格（仅修改widgetVar和ID）：

<p:dataTable widgetVar="Tb2" id="tbWList2" var="row"
             value="#{aBean.items}" rowKey="#{row.itemId}"
             scrollable="true" emptyMessage="No Item."
             resizableColumns="true" style="width:100%;"
             filteredValue="#{aBean.filteredItemList}">
             
    <p:column>
        <f:facet name="header">
            <h:outputText value="NAME"  style="float:left;"/>
        </f:facet>
        <h:outputText id="wName2" value="#{row.name}">
            <p:tooltip for="wName2" value="#{row.name}" />
        </h:outputText>
    </p:column>
    <p:column width="100">
        <f:facet name="header">
            <h:outputText value="VIEW" />
        </f:facet>
        
        <h:commandLink id="viewW2"
                       action="#{aBean.actionS(row.itemId,row)}"
                       styleClass="myStyle" />
    </p:column>
    <f:facet name="footer"></f:facet>
</p:dataTable>

内容的提问来源于stack exchange，提问作者Imran Khurram