2015-04-20 80 views
1

我正在使用Primefaces 5和具有多於150列的組數據表。我正在嘗試手動設置每個列的寬度。我在這裏嘗試了線程,但仍然是primefaces自動調整我的列寬度以在一個屏幕中顯示所有列而不進行任何水平滾動。我正在尋找一個地方設置px或%的列寬。 我不確定如何處理組標題。Primefaces組表手動設置列寬

我試過到目前爲止:

resizableColumns="true" style="table-layout: fixed" 
Set style="width:auto" and 

集CSS:

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

我的XHTML瀏覽:

<h:form> 
<p:dataTable id="userTable" value="#{userDAO.data}" var="ub" 
    binding="#{userBean.dataTable}" paginator="true" rows="500" 
    resizableColumns="true" style="table-layout: fixed"> 
    <f:facet name="header"> 
     <p:toolbar> 
      <!-- Header Codes Here --> 
     </p:toolbar> 
    </f:facet> 
    <p:columnGroup type="header"> 

     <p:row> 
      <p:column colspan="3" headerText="Application" style="width:auto" /> 
      <!-- <p:column colspan="6" headerText="Primary" width="100%" /> --> 
     </p:row> 
     <p:row> 
      <!-- ************ Application ************* --> 
      <p:column colspan="3" headerText="Key" style="width:auto" /> 
      <!-- ************ Primary ************* --> 
     </p:row> 
     <p:row> 
      <!-- ************ Appl Key ************* --> 
      <p:column headerText="Id" width="50" /> 
      <p:column headerText="F Name" width="150" /> 
      <p:column headerText="L Name" width="150" /> 

     </p:row> 
    </p:columnGroup> 

    <p:column headerText="Id" width="50"> 
     <h:outputText value="#{userBean.dataTable.rowIndex+1}" /> 
    </p:column> 
    <p:column headerText="First Name"> 
     <h:outputText value="#{ub.firstName}" /> 
    </p:column> 
    <p:column headerText="Last Name"> 
     <h:outputText value="#{ub.lastName}" /> 
    </p:column> -->   
    </p:dataTable> 
</h:form> 
</html> 
+1

我發現,如果我添加任何列組,然後我失去了我爲每列提供的所有固定寬度設置。我不知道如何解決它。 – SamK

+0

我在這裏看到相同的問題,因爲未解決:http://stackoverflow.com/questions/24807411/primefaces-datatable-colspan-column-width-not-working – SamK

+0

.ui-datatable表格{0} {0} {0} width:auto!important; } 應該工作。 – vels4j

回答

1

保持你的表CSS樣式:

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

取出寬度屬性,並設置在列風格最小寬度

<p:columnGroup type="header"> 
    <p:row> 
     <!-- ... --> 
    </p:row> 
    <p:row> 
     <p:column headerText="Id" style="min-width: 50px;" /> 
     <p:column headerText="F Name" style="min-width: 150px;" /> 
     <p:column headerText="L Name" style="min-width: 150px;" /> 
    </p:row> 
</p:columnGroup> 

希望它能幫助。

+0

也可以使用'width'值 –