tabla - styleclass jsf example

Establecer ancho para encabezado de columna JSF en tabla de tamaño fijo

Question

Tengo una tabla de datos JSF con table-layout: fixed, donde intento establecer el ancho basado en porcentaje para cada columna. Pensé que si agrego un atributo de ancho al encabezado en IE, entonces funciona como se esperaba. Sin embargo, no puedo entender cómo agregar este atributo de ancho en el código. He agregado un atributo dentro del encabezado de la faceta, pero eso no funcionó. Tampoco funcionó configurándolo dentro de la etiqueta de la columna.

Si alguien pudiera ayudarme, sería apreciado.

<h:column>
     <f:facet name="header">
         <h:outputText 
             value="#{messageSource[''tasks.headline.task'']}" />
             <f:attribute name="width" value="20%"/>
     </f:facet>
     <t:commandLink id="lookAtTask" action="lookAtTask">
         <t:updateActionListener property="#{flowScope.localTask}"
             value="#{data.task}" />
         <h:graphicImage url="/images/icon_properties_16x16.gif"
             alt="#{messageSource[''tasks.headline.task'']}" />
     </t:commandLink>
</h:column>

Answer 1

Puede usar el atributo headerClass de <h:column> para especificar una clase de estilo del encabezado.

<h:dataTable ...>
    <h:column headerClass="col1">
        <f:facet name="header">...</f:facet>
        ...
    </h:column>
    <h:column headerClass="col2">
        <f:facet name="header">...</f:facet>
        ...
    </h:column>
    <h:column headerClass="col3">
        <f:facet name="header">...</f:facet>
        ...
    </h:column>
</h:dataTable>

con, por ejemplo, este CSS

.col1 { width: 20%; }
.col2 { width: 30%; }
.col3 { width: 50%; }