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. 将div上的样式设置为 min-width：$ px ，并将 ui-datatable 类设置为使您的表满意的值
2. 从表中删除自动宽度并添加 table-layout：auto！对表元素非常重要，因此colums仍然会自动调整大小但相对于标题。

注意：table元素的宽度需要保持为100％（默认值），因此它会填充标题。

以下内容并非真正相关，但仍然很难知道＆＃39;。

Primefaces 5中的所有数据表都使用table-layout：fixed。您可以使用css覆盖以匹配旧的Primefaces模型。

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

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

可滚动数据表需要保持不变。

如果删除outputPanels并使用数据导出器构面作为链接，则可能会有所帮助。如果您更喜欢标题中的链接，请将它们放在一个范围内。

Priemfaces example

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

Answer 3

将您的数据表包含在panelGrid中

<p:panelGrid id="forautowidth" columns="1">
    --- Data Table Here ---
</p:panelGrid>

桌子周围有一个有点恼人的盒子，但这比过冲的分页器更好。此外，随着浏览器页面大小的变化，它也能正常运行