Visual JSF (Woodstock) Table Row Striping, or Alternating Row Colors

I recently encountered some issues with setting the class attribute of my table rows using Javascript on Internet Explorer, and Firefox 3.0.8. The class was designed to change the background of the <td> elements of my table. I finally decided that I would try using the TableRowGroup styleClasses tag to try to accomplish the "striping", or alternating the color of odd and even rows in the table. The tag description indicates that it is as easy as adding two style classes which will accomplish this. This is not quite true if you have tried it.

The CSS for the table component in Woodstock has defined a background-color of white (#FFFFFF). This makes overriding it quite difficult.

table.Tbl_sun4 td, table.Tbl_sun4 th {
background-color:#FFFFFF;
border-color:#CAD0D2;
}

I accomplished overriding it by placing the same element in the stylesheet.css file located in the project.

Here is what I added:

/*
* Override the default CSS for Woodstock Table to set the
* background-color to transparent so that we can set the
* styleClasses tag on the TableRowGroup to use the .odd-row
* and .even-row styles to alternate row colors.
*/
table.Tbl_sun4 td {
background-color: transparent;
}

/*
* This sets the background-color to a light gray color.
*/
.odd-row {
background-color: #EEEEEE;
}

/*
* This sets the background-color to white
*/
.even-row {
background-color: #FFFFFF;
}

I then added my new css classes to the TableRowGroup as seen below.



The final result was to produce an elegent table with alternating colored rows.



Here is a link to the NetBeans 6.5 project: TableAlternateRowStriping.zip