Primefaces 如何调整<;的宽度;p:列>;在<;p:panelGrid>;?

Primefaces 如何调整<;的宽度;p:列>;在<;p:panelGrid>;?,primefaces,Primefaces,我使用宽度属性作为 对于所有列 但在显示中,不调整列 我可以这样进去吗? 如果需要,请指导我实现我想要的列宽 您可以使用硬编码值: <p:column style="width:20px"> 或百分比: <p:column style="width:20%"> 取决于什么最适合您。您必须使用columnClasses属性并用逗号(,)分隔每个列样式。 下面的代码示例演示如何使用columnClassess属性 在头标签中: <style type="te

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

我可以这样进去吗?
如果需要,请指导我实现我想要的列宽

您可以使用硬编码值:

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

或百分比:

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


取决于什么最适合您。

您必须使用columnClasses属性并用逗号(,)分隔每个列样式。 下面的代码示例演示如何使用columnClassess属性

在头标签中:

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

.column1{宽度:10px;高度:自动}
.column2{宽度:5px;高度:自动}
.column3{宽度:20px;高度:自动}
体内标签:

<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标记。

我建议您使用ui网格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>


使用PrimeFaces时,最好的解决方案是获取手册,查看手册为其生成的元素提供了什么样式类,然后覆盖它们。使用萤火虫或其他东西。完美,即使我没有使用,也能工作。请将此标记为已接受的答案!这节省了我的时间!您还可以使用
styleClass=“table table full”
by
table
是一个通用的表格样式类(例如,只有两个角的圆角),而
table full
是一个全宽样式类
.table full{宽度:100%;}
例如::-)宽度为20%时,可以将文本居中吗