如何在 <p:panelGrid> 中调整 <p:column> 的宽度？答案

【问题标题】：how can I adjust width of <p:column> in <p:panelGrid>?如何在 <p:panelGrid> 中调整 <p:column> 的宽度？
【发布时间】：2013-03-25 05:44:21
【问题描述】：

我使用宽度属性作为对于所有列但在显示中，列没有调整。

我可以这样吗？如果，请指导我实现我想要的列宽。

【问题讨论】：

当您使用 PrimeFaces 时，您最好的解决方案是获取手册并检查它为其生成的元素提供的样式类，然后覆盖它们。使用萤火虫或其他东西。

标签： primefaces

【解决方案1】：

您必须使用 columnClasses 属性并用逗号（，）分隔每个列样式。下面的代码示例展示了如何使用 columnClassess 属性。

在头标签中：

<style type="text/css">
            .column1{width: 10px;height:auto}
            .column2{width: 5px;height:auto}
            .column3{width: 20px;height:auto}
           </style>

在正文标签中：

<p:panelGrid columnClasses="column1,column2,column3" columns="4" style="width: 100%" >  
                    <p:column></p:column>                        
                    <p:column></p:column>
                    <p:column></p:column> 
                    <p:column></p:column> 
                </p:panelGrid>

它也适用于 h:panelGrid 标签。

【讨论】：

完美，即使我不使用也能正常工作
请将此标记为已接受的答案！这节省了我的时间！

【解决方案2】：

您可以使用硬编码值：

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

或百分比：

<p:column style="width:20%">

取决于最适合您的。

【讨论】：

您也可以使用styleClass="table table-full" by table 是一个通用的表格样式类（例如，只有两个角的圆角），table-full 是一个全宽样式类。 .table-full {width:100%;} 例如。 :-)
宽度：20%，你能把文字居中吗

【解决方案3】：

我建议你使用 primefaces showcase 中描述的 ui-grid-col css 类。其中 12 = 100%

<div class="ui-grid ui-grid-responsive">
 <div class="ui-grid-row">
  <div class="ui-grid-col-2">
     <h:outputText value="To :" />
  </div>    
  <div class="ui-grid-col-4">
      <h:outputText value="#{bean.name}" />
  </div> 
</div>
<div class="ui-grid-row">
   <div class="ui-grid-col-2">
    <h:outputText value="Address :" />
  </p:column>  
  <div class="ui-grid-col-4">
    <p:outputLabel value="#{bean.address}" />  
  </div>
</div>

【讨论】：