css - bootstrap - Cómo establecer el ancho de la columna ap: en ap: dataTable en PrimeFaces 3.0?

primefaces datatable list

Question

Estoy usando PrimeFaces 3.0-M3 y tengo una <p:dataTable> con dos columnas en ella. Quiero que la primera columna se fije con un ancho de 20 píxeles. La otra columna puede usar cualquier espacio que sobra.

Aquí hay capturas de pantalla de lo que estoy recibiendo actualmente:

La primera <p:column> parece ignorar la configuración de style que debería haber limitado el ancho. Su tamaño es demasiado grande para el cuadrado de color pequeño que es el único contenido dentro de él y luego la otra columna se empuja demasiado hacia la derecha.

Aquí hay más de mi código 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>

¿Alguien puede decirme cómo modificar mi código de Facelet para que la primera columna tenga un ancho fijo de 20 píxeles?

Answer 1

Acabo de hacer lo siguiente (en V 3.5) y funcionó a las mil maravillas:

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

Answer 2

Además de la respuesta de @BalusC. También necesita establecer el ancho de los encabezados. En mi caso, debajo de css solo se puede aplicar al ancho de la columna de mi mesa.

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

Answer 3

El estilo en línea funcionaría en cualquier caso

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

Answer 4

En PrimeFaces 3.0, ese estilo se aplica en el <div> interno generado de la celda de la tabla, no en el <td> como usted (y yo) esperaríamos. El siguiente ejemplo debería funcionar para usted:

<p:dataTable styleClass="myTable">

con

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

En PrimeFaces 3.5 y superior, debería funcionar exactamente de la forma en que codificaste y esperaste.

Answer 5

En Primefaces 6.1 use el atributo colspan.

<p:column headerText="Status" colspan="50" style="text-align:left">

Answer 6

Esto funcionó para mí

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

Answer 7

No sé qué navegador estás usando, pero según w3schools.com, nth-child y nth-last-child ahora funcionan en MSIE 8. No sé de 9. http://www.w3schools.com/cssref/pr_border-style.asp le dará más información.

Answer 8

Por alguna razón, esto no estaba funcionando

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

Pero esto funcionó:

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

Answer 9

puedes intentar

<p:column width="20">