Question

我正在使用Primefaces 5和一个包含150多列的Group数据表。我想手动设置每个列宽。我在这里尝试了线程，但仍然是primefaces自动调整我的列宽以在一个屏幕中显示所有列而不进行任何水平滚动。我正在寻找一个地方来设置px或％的列宽。我不知道如何使用Group Heading。

我到目前为止尝试过：

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>

Answer 1

保持你的表格CSS样式：

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

删除宽度属性并在列样式上设置 min-width ：

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

希望它有所帮助。

Answer 2

我通过添加expandableRowGroups="true"解决了这个问题，然后我可以使用样式属性。

<p:dataTable expandableRowGroups="true" scrollable="true" >
<p:columnGroup type="header">
    <p:row>
        <p:column rowspan="2" headerText="txt" style="width:50px;" />
    </p:row>
</p:columnGroup>
</p:dataTable>

Primefaces Group Table手动设置列宽

2 个答案: