Skip to Content
1
Former Member
May 24, 2016 at 11:25 AM

Crosstab css: Zebra style + Responsive effect

497 Views

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:

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.

Attachments

Zebra.PNG (17.1 kB)
Responsive.png (15.4 kB)