我使用PrimeFaces 3.0-M3,我有一个< p:dataTable>与两列在它。我想要第一列固定在20px的宽度。另一列可以使用任何剩余的空间。
这里是我目前得到的截图:
第一个< p:column>似乎忽略了应该限制宽度的样式设置。它的大小方式太大,对于微小的彩色方块,它是唯一的内容,然后另一列被推得太远,向右。
这里是更多的我的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>
解决方法
在PrimeFaces 3.0中,该样式应用于生成的内部< div>的表格单元格,而不是< td>正如你(和我)期望的。以下示例应适用于您:
<p:dataTable styleClass="myTable">
与
.myTable td:nth-child(1) { width: 20px; }
在PrimeFaces 3.5及以上版本中,它应该按照您编码和预期的方式工作。