JSF - tomahawk t:panelGrid styling - jsf

Question

JSF:
...
xmlns:t="http://myfaces.apache.org/tomahawk">
<t:panelGrid columns="4">
...
</t:panelGrid>
It dynamically generates plain old HTML table with tr's and td's elements.
How can I set specific css styles for these tr and/or td elements?

Answer 1

Use columnClasses and rowClasses attributes to give each cell a unique class
For example:
<t:panelGrid columns="4" columnClasses="a,b,c,d" rowClasses="x,y,z">
</t:panelGrid>
columnClasses
The columnClasses attribute accepts a comma-delimited list of CSS style classes that will be applied to the columns of the table. Style classes for an individual column may also be defined in a space separated list. A style class is applied to a table column as the value for the class attribute of rendered td or th element.
The algorithm used to apply the CSS style classes to the table columns is simple. In the table rendering process, style classes are applied to columns one at a time until (a) there are no more columns to display or (b) there are no more style classes to apply.
* 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
The rowClasses attribute accepts a comma-delimited list of CSS style classes to be applied to the rows of the table. Style classes for an individual row may also be defined in a space separated list. A style class is applied to a table row as the value for the class attribute of rendered tr element.
Style classes are applied to rows in the same order that they are defined. For example, if there are two style classes, the first is applied to the first row, the second is applied to the second row, the first is applied to the third row, the second is applied to the fourth row, and so on. The list of styles is looped over from the beginning until there are no more rows to display.
In my standard JSF Project (Mojarra 2.0.3)
This tag generates:
<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>
This 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>