jsf - Primefaces 数据表标题宽度 :auto

Question

我正在使用 Primefaces 5 开发动态数据表。我已将表格宽度设置为自动。这真的很好。我的专栏只使用所需的宽度，这是完美的。但我也使用分页器和表头。所以我的表是这样的:

<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>

如何强制页眉和分页器具有与表格相同的宽度？

Answer 1

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

.ui-datatable {
    display: table;
}

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

我还没有尝试调整大小或其他任何东西。