我正在使用PrimeFaces 3.0-M3,我有<p:dataTable>
,其中有两列。我希望第一列固定在20px的宽度。另一列可以使用遗留的任何空间。
以下是我目前获得的截图:
第一个<p:column>
似乎忽略了应该限制宽度的style
设置。它的大小太大,不适合小的彩色方块,它是内部唯一的内容,然后另一列被推得太远了。
以下是我的Facelet代码:
<p:dataTable
id="dataTableExpressions"
value="#{catconBean.userDefinedExpressionDataModel}"
var="currentRow"
emptyMessage="!! EMPTY TABLE MESSAGE !!"
selection="#{catconBean.userDefinedExpressionToEdit}"
selectionMode="single">
<p:ajax
event="rowSelect"
listener="#{catconBean.onUserDefinedExpressionRowSelect}"
update=":toolbarForm:catconToolbar" />
<p:ajax
event="rowUnselect"
listener="#{catconBean.onUserDefinedExpressionRowUnselect}"
update=":toolbarForm:catconToolbar" />
<p:column id="paletteColor" style="width:20px;">
<h:panelGroup
layout="block"
rendered="#{not empty currentRow.paletteColor}"
style="width:16px;height:16px;border:thin;border-style:solid;border-color:black;background-color:##{currentRow.paletteColor.RGB};" />
<h:panelGroup
layout="block"
rendered="#{empty currentRow.paletteColor}"
style="width:16px;height:16px;border:thin;border-style:dashed;border-color:red;background-color:white;text-align:center;">
<h:outputText value="?" style="color:red;font-weight:bold;" />
</h:panelGroup>
</p:column>
<p:column id="name">
<f:facet name="header">
<h:outputText value="#{bundle.catcon_label_CategoryName}" />
</f:facet>
<h:outputText
value="#{currentRow.name}"
style="#{not currentRow.definitionComplete ? 'color:red;' : ''}" />
</p:column>
</p:dataTable>
有谁能告诉我如何修改我的Facelet代码,使第一列的固定宽度为20px?
答案 0 :(得分:34)
在PrimeFaces 3.0中,该样式应用于表格单元格的生成内部<div>
,而不是{(1}},就像您(和我)所期望的那样。以下示例应该适合您:
<td>
与
<p:dataTable styleClass="myTable">
在PrimeFaces 3.5及更高版本中,它应该完全按照您编码和预期的方式工作。
答案 1 :(得分:13)
这对我有用
<p:column headerText="name" style="width:20px;"/>
答案 2 :(得分:3)
出于某种原因,这不起作用
<p:column headerText="" width="25px" sortBy="#{row.key}">
但这有效:
<p:column headerText="" width="25" sortBy="#{row.key}">
答案 3 :(得分:2)
我不知道你正在使用什么浏览器,但根据w3schools.com,n-child和n-last-child现在可以使用MSIE 8.我不知道9 {{3}会给你更多信息。
答案 4 :(得分:0)
<p:column width="20">
答案 5 :(得分:0)
我刚刚做了以下(在V 3.5中),它就像一个魅力:
<p:column headerText="name" width="20px"/>
答案 6 :(得分:0)
除了@BalusC的回答。您还需要设置标题的宽度。在我的情况下,css下方只能应用于我的表的列宽。
Variant
答案 7 :(得分:0)
内联样式在任何情况下都可以使用
<p-column field="Quantity" header="Qté" [style]="{'width':'48px'}">