如何解决Primefaces p:dataTable空数据时在IE浏览器过度收缩问题

方案1：自定义空结果占位内容 #

IE对空<tbody>元素的宽高计算存在原生布局bug，主动填充非空的占位内容可强制触发表格正常布局计算，优先级高于PrimeFaces默认空状态样式，配置示例如下：

<p:dataTable value="#{yourBean.data}" var="item" filteredValue="#{yourBean.filteredData}">
  <p:emptyMessage>
    <div style="width: 100%; min-height: 40px; line-height: 40px; text-align: center;">暂无匹配数据</div>
  </p:emptyMessage>
  <!-- 原有列、过滤、排序配置保持不变 -->
</p:dataTable>

方案2：IE专属CSS Hack修复 #

使用IE专属媒体查询编写样式，仅在IE环境下生效，不会干扰其他浏览器的正常表现：

/* 仅适配IE10、IE11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* 强制表格滚动容器最小宽高，避免收缩 */
  .ui-datatable-scrollable-body {
    min-height: 50px !important;
    min-width: 100% !important;
  }
  /* 表头表尾宽度和表格主体对齐，避免错位 */
  .ui-datatable-scrollable-header, 
  .ui-datatable-scrollable-footer {
    width: 100% !important;
  }
}

方案3：过滤事件后主动触发IE重绘 #

部分场景下IE不会自动刷新表格布局，可在过滤完成的回调中主动触发重排修正样式，配置如下：
首先给表格添加过滤事件监听：

<p:dataTable value="#{yourBean.data}" var="item" filteredValue="#{yourBean.filteredData}">
  <p:ajax event="filter" oncomplete="fixIEDataTableLayout()" />
  <!-- 原有列、过滤、排序、空消息配置保持不变 -->
</p:dataTable>

添加对应的JS逻辑：

function fixIEDataTableLayout() {
  // 仅在IE环境下执行逻辑
  if (window.navigator.userAgent.indexOf('Trident') > -1) {
    const scrollBody = document.querySelector('.ui-datatable-scrollable-body');
    if (scrollBody) {
      // 触发IE强制重排
      scrollBody.style.display = 'none';
      void scrollBody.offsetHeight;
      scrollBody.style.display = 'block';
    }
  }
}

以上三个方案可组合使用，兼容绝大多数空结果布局异常场景。

内容的提问来源于stack exchange，提问作者Christian O.