如何在PrimeFaces 3.0中的p：dataTable中设置p：列的宽度？

问题描述

我使用PrimeFaces 3.0-M3，我有一个< p：dataTable> ，有两列。我想要第一列固定在20px的宽度。

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.

这里是我目前得到的屏幕截图：

Here are screenshots of what I'm currently getting:

第一个< p： column> 似乎忽略了应该限制宽度的 style 设置。它的大小太大，对于微小的彩色方块，它是唯一的内容，然后其他列被推得太远，向右。

The first <p:column> seems to be ignoring the style setting 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.

这里是更多的我的Facelet代码：

Here is more of my Facelet code:

<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 ？在PrimeFaces 3.0中，该样式应用于生成的内部< div>

Can anyone tell me how to modify my Facelet code to make the first column have a fixed width of 20px?

推荐答案

code>，而不是你（和我）期望的< td> 。以下示例应该为您提供：

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:

<p:dataTable styleClass="myTable">

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

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

In PrimeFaces 3.5 and above, it should work exactly the way you coded and expected.

这篇关于如何在PrimeFaces 3.0中的p：dataTable中设置p：列的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！