jsf - espacio - primefaces panelgrid style

JSF-tomahawk t: panelGrid estilo

Question

JSF:

...
    xmlns:t="http://myfaces.apache.org/tomahawk">
     <t:panelGrid columns="4">
       ...
     </t:panelGrid>

Genera dinámicamente una tabla HTML simple con los elementos tr y s.

¿Cómo puedo establecer estilos CSS específicos para estos elementos tr y / o td ?

Answer 1

Use los atributos columnClasses y rowClasses para dar a cada celda una clase única

Por ejemplo:

 <t:panelGrid columns="4" columnClasses="a,b,c,d" rowClasses="x,y,z">

 </t:panelGrid>

columnClasses

El atributo columnClasses acepta una lista delimitada por comas de clases de estilo CSS que se aplicarán a las columnas de la tabla. Las clases de estilo para una columna individual también se pueden definir en una lista separada por espacios. Una clase de estilo se aplica a una columna de tabla como el valor para el atributo de clase del elemento td o th representado.

El algoritmo utilizado para aplicar las clases de estilo CSS a las columnas de la tabla es simple. En el proceso de representación de la tabla, las clases de estilo se aplican a las columnas de a una por vez hasta que (a) no haya más columnas para mostrar o (b) ya no haya más clases de estilo para aplicar.

* If (a) happens at the same time as (b), the next row in the table is rendered.
* If (a) happens before (b), the remaining style classes are ignored.
* If (b) happens before (a), the remaining columns will not have style classes.

rowClasses

El atributo rowClasses acepta una lista delimitada por comas de clases de estilo CSS para aplicarlas a las filas de la tabla. Las clases de estilo para una fila individual también se pueden definir en una lista separada por espacios. Una clase de estilo se aplica a una fila de la tabla como el valor para el atributo de clase del elemento tr representado.

Las clases de estilo se aplican a las filas en el mismo orden en que se definen. Por ejemplo, si hay dos clases de estilo, la primera se aplica a la primera fila, la segunda se aplica a la segunda fila, la primera se aplica a la tercera fila, la segunda se aplica a la cuarta fila, y así sucesivamente. La lista de estilos se repite desde el principio hasta que no haya más filas para mostrar.

En mi proyecto estándar JSF (Mojarra 2.0.3)

Esta etiqueta genera:

   <h:panelGrid border="1"
                columns="4" 
                columnClasses="a,b,c,d" 
                rowClasses="x,y,z">

                    <h:outputText value="ax"/>
                    <h:outputText value="bx"/>
                    <h:outputText value="cx"/>
                    <h:outputText value="dx"/>

                    <h:outputText value="ay"/>
                    <h:outputText value="by"/>
                    <h:outputText value="cy"/>
                    <h:outputText value="dy"/>

                    <h:outputText value="az"/>
                    <h:outputText value="bz"/>
                    <h:outputText value="cz"/>
                    <h:outputText value="dz"/>

   </h:panelGrid>

Este HTML:

    <table border="1">
        <tbody>
            <tr class="x">
                <td class="a">ax</td>
                <td class="b">bx</td>
                <td class="c">cx</td>
                <td class="d">dx</td>
            </tr>
            <tr class="y">
                <td class="a">ay</td>
                <td class="b">by</td>
                <td class="c">cy</td>
                <td class="d">dy</td>
            </tr>
            <tr class="z">
                <td class="a">az</td>
                <td class="b">bz</td>
                <td class="c">cz</td>
                <td class="d">dz</td>
            </tr>
        </tbody>
    </table>