如何在 PrimeFaces 3.0 的 p:dataTable 中设置 p:column 的宽度？答案

【问题标题】：How to set width of a p:column in a p:dataTable in PrimeFaces 3.0?如何在 PrimeFaces 3.0 的 p:dataTable 中设置 p:column 的宽度？
【发布时间】：2011-11-18 01:14:03
【问题描述】：

我正在使用 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 代码以使第一列具有 20 像素的固定宽度？

【问题讨论】：

标签： css jsf jsf-2 primefaces datatable

【解决方案1】：

在 PrimeFaces 3.0 中，该样式应用于生成的表格单元格的内部 <div>，而不是您（和我）期望的 <td>。以下示例应该适合您：

<p:dataTable styleClass="myTable">

与

.myTable td:nth-child(1) {
    width: 20px;
}

在 PrimeFaces 3.5 及更高版本中，它应该完全按照您的编码和预期方式工作。

【讨论】：

我试过了，但似乎没有任何效果。我所做的唯一其他更改是从我的 <p:column> 声明中删除 style="width:20px;"，这也没有任何效果。
它是...在 Firefox 4.0.1 下与您的解决方案一起使用，但在 IE 7 下无法使用。不幸的是，IE 7 是目标环境中使用的浏览器。跨度>
那个老浏览器确实不支持所有现代选择器。考虑 IE7.js：code.google.com/p/ie7-js 或者向 PF 家伙报告一个问题，你希望 columnClasses 回到 <p:dataTable> 中，就像 <h:dataTable> 一样（这是我看到的第一个，但令我惊讶的是它没有'不支持该属性）另见forum.primefaces.org/viewtopic.php?f=3&t=1797
会的。感谢您的帮助！
不客气。也许他们将能够提出替代的和 IE7 兼容的方法来实现这一要求。到目前为止，我没有看到任何内容，但我会对他们的回答感到好奇。

【解决方案2】：

你可以试试

<p:column width="20">

【讨论】：

【解决方案3】：

我不知道您使用的是什么浏览器，但根据 w3schools.com，nth-child 和 nth-last-child 现在可以在 MSIE 8 上运行。我不知道 9。http://www.w3schools.com/cssref/pr_border-style.asp 会给你更多信息。

【讨论】：

【解决方案4】：

我刚刚执行了以下操作（在 V 3.5 中），它就像一个魅力：

<p:column headerText="name" width="20px"/>

【讨论】：

【解决方案5】：

这对我有用

<p:column headerText="name" style="width:20px;"/>

【讨论】：

【解决方案6】：

除了@BalusC 的答案。您还需要设置标题的宽度。在我的情况下，下面的 css 只能适用于我的表格的列宽。

.myTable td:nth-child(1),.myTable th:nth-child(1) {
   width: 20px;
}

【讨论】：

【解决方案7】：

由于某种原因，这不起作用

<p:column headerText="" width="25px" sortBy="#{row.key}">

但这有效：

<p:column headerText="" width="25" sortBy="#{row.key}">

【讨论】：

（仍然有效：）在 Primefaces 6.1 中，没有单位的属性宽度表示 px，单位 % 表示表格宽度的百分比。
% 对我不起作用。我能够使用例如width="40" 和 width="60" 就像他们是 % 一样。
原因是PF在width属性中添加了“px”，所以在第一种情况下你得到了style="width:10pxpx"

【解决方案8】：

内联样式在任何情况下都可以工作

  <p-column field="Quantity" header="Qté" [style]="{'width':'48px'}">

【讨论】：