Primefaces Datatable标题宽度:auto

Question

我正在使用Primefaces 5开发动态数据表.我已将表格宽度设置为auto.这真的很好.我的专栏仅使用所需的宽度,这是完美的.但我也使用paginator和Table标头.所以我的表看起来像这样:

<p:dataTable var="row"  
             editingRow="#{row.status == CommonConstant.ROWSTATUS_EDIT}" 
             tableStyle="width:auto"
             value="#{componentBean.componentData[componentId].lazyModel}"
             id="#{componentId}" 
             editable="true" scrollable="false" scrollHeight="100%"
             resizableColumns="true"
             paginator="true"
             paginatorPosition="top"
             rowsPerPageTemplate="10 25 50 100"
             lazy="true">
  <f:facet name="header">   
    <p:outputPanel style="text-align:right">  
      <h:commandLink rendered="#{fn:indexOf(componentBean.componentData[componentId].loadedData.actions, CommonConstant.ACTIONTYPE_EXCEL) >= 0}" >
        <img border="0" src="img/excel.png" width="24"/>
        <p:dataExporter type="xls" target="#{componentId}" fileName="#{appDialogId}" />
      </h:commandLink>

      <h:commandLink rendered="#{fn:indexOf(componentBean.componentData[componentId].loadedData.actions, CommonConstant.ACTIONTYPE_PDF) >= 0}">
        <img border="0" src="img/pdf.png" width="24"/>
        <p:dataExporter type="pdf" target="#{componentId}" fileName="#{appDialogId}"/>
      </h:commandLink>

    </p:outputPanel>    

    <p:outputPanel>
      <h:outputText value="#{componentBean.componentData[componentId].loadedData.appdialogid}" />
    </p:outputPanel>                                              
  </f:facet>
...
</p:dataTable>

如何强制Header和paginator具有与表相同的宽度？

Answer 1

对于普通数据表,试试这个:

.ui-datatable {
    display: table;
}

.ui-datatable table {
    table-layout: auto !important;
}

我还没有尝试过resizable或其他任何东西.

Answer 2

我假设您正在数据表上设置自动宽度，因为我可以重新创建您的问题。

尝试这个：

1. 将带有ui-datatable类的div 上的样式设置为min-width: $px ，设置为使您的表格满意的值
2. 从表格中删除自动宽度并添加table-layout: auto ！对于表元素很重要，因此列仍然会自动调整大小，但相对于标题。

注意：表格元素的宽度需要保持为默认值 100%，以便填充标题。

下面的内容并不真正相关，但仍然“很高兴知道”。

Primefaces 5 中的所有数据表均使用表布局：固定。您可以使用 css 进行覆盖以匹配较旧的 Primefaces 模型。

.ui-datatable table, .ui-datatable-resizable table {
    table-layout: auto !important;
}

.ui-datatable-scrollable table {
    table-layout: fixed !important;
}

可滚动数据表需要保持固定。

如果您删除输出面板并使用链接的数据导出器方面可能会有所帮助。如果您喜欢标题中的链接，请将它们放在跨度中。

前脸示例

<f:facet name="{Exporters}">
        <h:commandLink> ...
        </h:commandLink> ...
</f:facet>