Primefaces Group Table 手动设置列宽答案

【问题标题】：Primefaces Group Table Set Column Width ManuallyPrimefaces Group Table 手动设置列宽
【发布时间】：2015-06-27 09:26:56
【问题描述】：

我正在使用 Primefaces 5 和一个超过 150 列的组数据表。我正在尝试手动设置每个列宽。我在这里尝试了线程，但 primefaces 仍然会自动调整我的列宽以在一个屏幕中显示所有列，而无需任何水平滚动。我正在寻找一个以 px 或 % 为单位设置列宽的地方。我不知道如何处理组标题。

到目前为止我试过了：

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>

【问题讨论】：

我发现如果我添加任何列组，那么我将失去为每列提供的所有固定宽度设置。我不知道如何解决它。
我在这里看到同样的问题未解决：stackoverflow.com/questions/24807411/…
.ui-datatable 表{ width:auto!important; } 应该可以工作。
@vels4J，它不起作用，我已经这样做了，并在 set in css: 下提到了问题

标签： html jsf-2 primefaces

【解决方案1】：

保持表格 CSS 样式：

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

移除 width 属性并在列样式上设置 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>

希望对你有帮助。

【讨论】：

也可以使用width值

【解决方案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>

【讨论】：