如何更改 PrimeFaces 中面板网格的列宽答案

【问题标题】：How can I change column width of panel grid in PrimeFaces如何更改 PrimeFaces 中面板网格的列宽
【发布时间】：2013-05-22 12:20:26
【问题描述】：

我正在使用 Java EE 和 PrimeFaces。如何更改 PrimeFaces 中面板网格的列宽？有例子吗？

【问题讨论】：

贴出你试过的代码。

标签： jsf primefaces

【解决方案1】：

您可以使用 columnClasses 限定 panelGrid 中的列。以下代码设置不同的宽度并将单元格内容对齐到顶部。

<h:panelGrid columns="2" style="width: 100%" columnClasses="forty-percent top-alignment, sixty-percent top-alignment">

.forty-percent {
     width: 40%;
}

.sixty-percent {
     width: 60%;
}

.top-alignment {
     vertical-align: top;
}

【讨论】：

如果您有多个列，您还可以指定没有自定义 css 的列的宽度比，例如 <p:panelGrid columns="4" columnClasses="ui-grid-col-2, ui-grid-col-4, ui-grid-col-2, ui-grid-col-4" layout="grid">... </p:panelGrid>
我更喜欢@NwawelAIroume 的答案，因为它坚持使用 CSS 框架并且不添加任何额外的 CSS（可能有一天会中断响应）。

【解决方案2】：

我遇到了类似的问题，这是我的解决方案：

<p:panelGrid style="width:100%"> # notice that I do not define columns attribute in p:panelGrid!!
    <f:facet name="header"> # header
        <p:row> # p:row and p:column are obligatory to use since we do not define columns attribute!
            <p:column colspan="2"> # here I use colspan=2, coz I have 2 columns in the body
                Title
            </p:column>
        </p:row>
    </f:facet>

    <p:row>
        <p:column style="width:150px"> # define width of a column
            Column 1 content
        </p:column>
        <p:column> # column 2 will fill the rest of the space
            Column 2 content
        </p:column>
    </p:row>

    <f:facet name="footer"> # similar as header
        <p:row>
            <p:column colspan="2">
                Footer content
            </p:column>
        </p:row>
    </f:facet>
</p:panelGrid>

如您所见，主要区别在于您在p:panelGrid 中不定义columns 属性。在页眉和页脚中，您必须使用 p:row 和 p:column，在我的情况下，我还必须使用 colspan=2，因为在正文中我们有 2 列。

希望这会有所帮助；）

【讨论】：

【解决方案3】：

你考虑过 style 属性吗？示例：

<p:panelGrid columns="2" style="width: 50px">

否则，对于列：

<p:column style="width:50px">

参考这个帖子：how can I adjust width of <p:column> in <p:panelGrid>?

【讨论】：

感谢 Gloserio，但它仍然无法正常工作：一列的宽度与该列中的内容相关；第一列中的也与第二列中的不对齐
您或许应该发布您的代码以及您期望从中获得的进一步帮助。
@Akheloes <p:panelGrid columns="2" style="width: 50px"> 不起作用（无论是 px 还是 % 顺便说一句）——渲染的表格仍然与屏幕一样大