For anyone interested:
There is actually an attribute in both rich:dataTable and rich:extendedDataTable called "rowClasses" that allows you to specify the CSS class for the rows, and you can specify more than one CSS class ( separate by comma ). If there is more than one, the classes are applied alternately. I did not know about this attribute until I bumped into it in another site, as the attribute was not mentioned at all in the on-line documentation.
So instead of using rich:jQuery from the showcase for rich:dataTable to implement zerba colouring, use rowClasses instead.
Then only use rich:jQuery for the active row selection, but change the selector so that it only applies to the rows of the rich:extendedDataTable so that it does not apply to the header. by specifying the CSS class used as default by richfaces for the extendedDataTable's body ( which is .rf-edt-b ), like so:
<rich:jQuery id="contactsMouseOver" selector="#contactDetails .rf-edt-b tbody tr" event="mouseover" query="jQuery(this).addClass('active-row')" />
<rich:jQuery id="contactsMouseOut" selector="#contactDetails .rf-edt-b tbody tr" event="mouseout" query="jQuery(this).removeClass('active-row')" />