Hi everybody.
I've got a request for crosstab formating that combines the following formats:
- Zebra-like (odd rows with background color A and even rows with background color B)
- 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:
Responsive (row 5 is hovered, row 8 is selected):
Our problem is that we cannot use these two classes at the same time. If we do so, the output is as follows:
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.