CSS 如何在 PrimeFaces 3.0 中的 ap:dataTable 中设置 ap:column 的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7434203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set width of a p:column in a p:dataTable in PrimeFaces 3.0?
提问by Jim Tough
I'm using PrimeFaces 3.0-M3 and I have a <p:dataTable>with two columns in it. I want the first column to be fixed at a width of 20px. The other column can use whatever space is left over.
我正在使用 PrimeFaces 3.0-M3，其中<p:dataTable>有两列。我希望第一列的宽度固定为 20px。另一列可以使用剩余的任何空间。
Here are screenshots of what I'm currently getting:
以下是我目前得到的截图：
The first <p:column>seems to be ignoring the stylesetting that should have limited the width. It is sized way too big for the tiny coloured square that is the only content inside it and then the other column is pushed too far to the right.
第一个<p:column>似乎忽略了style应该限制宽度的设置。它的大小对于作为其中唯一内容的微小彩色方块来说太大了，然后另一列被向右推得太远。
Here is more of my Facelet code:
这是我的更多 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>
Can anyone tell me how to modify my Facelet code to make the first column have a fixed width of 20px?
谁能告诉我如何修改我的 Facelet 代码以使第一列具有 20px 的固定宽度？
回答by BalusC
In PrimeFaces 3.0, that style get applied on the generated inner <div>of the table cell, not on the <td>as you (and I) would expect. The following example should work out for you:
在 PrimeFaces 3.0 中，该样式应用于生成<div>的表格单元格内部，而不是<td>您（和我）期望的那样。以下示例应该适合您：
<p:dataTable styleClass="myTable">
with
和
.myTable td:nth-child(1) {
width: 20px;
}
In PrimeFaces 3.5 and above, it should work exactly the way you coded and expected.
在 PrimeFaces 3.5 及更高版本中，它应该完全按照您编码和预期的方式工作。
回答by daya
This worked for me
这对我有用
<p:column headerText="name" style="width:20px;"/>
回答by Jose Manuel Gomez Alvarez
For some reason, this was not working
由于某种原因，这不起作用
<p:column headerText="" width="25px" sortBy="#{row.key}">
But this worked:
但这有效：
<p:column headerText="" width="25" sortBy="#{row.key}">
回答by DougMH
I don't know what browser you're using, but according to w3schools.com, nth-child and nth-last-child do now work on MSIE 8. I don't know about 9. http://www.w3schools.com/cssref/pr_border-style.aspwill give you more info.
我不知道你使用的是什么浏览器，但根据 w3schools.com，nth-child 和 nth-last-child 现在可以在 MSIE 8 上工作。我不知道 9。http://www.w3schools .com/cssref/pr_border-style.asp将为您提供更多信息。
回答by Lars Juel Jensen
I just did the following (in V 3.5) and it worked like a charm:
我只是做了以下（在 V 3.5 中），它就像一个魅力：
<p:column headerText="name" width="20px"/>
回答by enrico.devita
can you try
你能试一下吗
<p:column width="20">
回答by Bellash
Inline styling would work in any case
内联样式在任何情况下都可以使用
<p-column field="Quantity" header="Qté" [style]="{'width':'48px'}">
回答by Cataclysm
Addition to @BalusC 's answer. You also need to set width of headers. In my case, below css can only apply to my table's column width.
除了@BalusC 的回答。您还需要设置标题的宽度。就我而言，下面的 css 只能适用于我表格的列宽。
.myTable td:nth-child(1),.myTable th:nth-child(1) {
width: 20px;
}
