Crosstab css: Zebra style + Responsive effect

Hi everybody.

I've got a request for crosstab formating that combines the following formats:

1. Zebra-like (odd rows with background color A and even rows with background color B)
2. Responsive look and feel (hover row with background color C and selected row with background color D)

In my css file, the following classes are defined:

/*Zebra*/

.myZebraTab .sapzencrosstab-RowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(odd) td

{background: #c9c9e4!important;}

.myZebraTab .sapzencrosstab-RowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(even) td

{background: #a4a4ff!important;}

.myZebraTab .sapzencrosstab-DataArea tr:nth-child(odd) td

{background: #c9c9e4 !important;}

.myZebraTab .sapzencrosstab-DataArea tr:nth-child(even) td

{background: #a4a4ff !important;}

/*Responsive*/

.myResponsiveTab .sapzencrosstab-HoverRowHeaderCell.sapzencrosstab-HeaderCellDefault

{background: #fbc9a8 !important;}

.myResponsiveTab .sapzencrosstab-RowHeaderArea .sapzencrosstab-HoverRowHeaderCell.sapzencrosstab-HeaderCellDefault

{background: #fbc9a8 !important;}

.myResponsiveTab .sapzencrosstab-RowHeaderArea .sapzencrosstab-HoverRowHeaderCell.sapzencrosstab-HeaderCellAlternating

{background: #fbc9a8 !important;}

.myResponsiveTab .sapzencrosstab-DataArea .sapzencrosstab-HoverDataCell.sapzencrosstab-DataCellDefault

{background: #fbc9a8 !important;}

.myResponsiveTab .sapzencrosstab-DataArea .sapzencrosstab-HoverDataCell.sapzencrosstab-DataCellAlternating

{background: #fbc9a8 !important;}

.myResponsiveTab .sapzencrosstab-HeaderCellHoverRow

{background: #fbc9a8!important;}

.myResponsiveTab .sapzencrosstab-HeaderCellSelectRow

{background: #F9AD79 none repeat scroll 0% 0% !important;}

.myResponsiveTab .sapzencrosstab-DataCellSelectData, .sapzencrosstab-DataCellAlternating.sapzencrosstab-DataCellSelectData

{background: #F9AD79 none repeat scroll 0% 0% !important;}

Each of the above classes works as expected when used individually:

Zebra-like:

Image may be NSFW.
Clik here to view.

Responsive (row 5 is hovered, row 8 is selected):

Image may be NSFW.
Clik here to view.

Our problem is that we cannot use these two classes at the same time. If we do so, the output is as follows:

Image may be NSFW.
Clik here to view.

As you'd notice, the hover color is not applied in the Header Cell of the row.

Moreover, a selected row cannot be recognized at all.

Please advice.