PrimeFaces dataTable自动宽度下表头与表体列错位如何解决

问题复现 #

需求是实现dataTable列宽自动适配内容的展示效果，实际渲染时表体列和表头无法对齐，异常效果如下：

当前使用的代码：

<p:dataTable id="datalist2" value="#{item.formItemCollection}"
    var="item2" scrollable="true" scrollHeight="100" tableStyle="width:auto" 
    emptyMessage="#{bundle.EmptyMessage}" >

<ui:include src="/view/formItem/formItemListRow.xhtml">
    <ui:param name="rowItem" value="#{item2}"/>  
    <ui:param name="controller" value="#{formItemController}"/>  
</ui:include>

故障原因 #

PrimeFaces的scrollable="true"开启后，组件会将表头、表体渲染为两个互相独立的HTML table元素。配置tableStyle="width:auto"时，两个独立表格会分别根据自身内部的文本内容计算列宽，没有统一的宽度同步逻辑，最终导致列错位。

修复方案 #

任选一种即可解决：

• 移除tableStyle="width:auto"配置，给dataTable设置width="100%"或者固定宽度值，PrimeFaces会接管列宽计算，自动同步表头和表体的列尺寸，从根源避免错位
• 若必须保留列宽自动适配内容的效果，弃用组件自带的滚动属性，在外层套一个普通div实现滚动，让整个dataTable渲染为单个完整table，不存在两个表格宽度计算不一致的问题，示例：

<div style="height: 100px; overflow-y: auto;">
    <p:dataTable id="datalist2" value="#{item.formItemCollection}"
        var="item2" tableStyle="width:auto" 
        emptyMessage="#{bundle.EmptyMessage}" >
        <ui:include src="/view/formItem/formItemListRow.xhtml">
            <ui:param name="rowItem" value="#{item2}"/>  
            <ui:param name="controller" value="#{formItemController}"/>  
        </ui:include>
    </p:dataTable>
</div>

• 使用PrimeFaces 10及以上版本的话，直接给dataTable添加autoLayout="true" resizableColumns="true"属性，组件内置的自动布局逻辑会自动完成表头表体的列宽同步，不需要改现有滚动配置。

内容的提问来源于stack exchange，提问作者v-peter