How to set width of a p:column in a p:dataTable in PrimeFaces 3.0?

css, datatable, jsf, jsf-2, primefaces

Solution

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">

with

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

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

Problem

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: 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. 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> ``` Can anyone tell me how to modify my Facelet code to make the first column have a fixed width of 20px?

Original source