highlight alternate rows with colors in crosstab

[sumitdubey]

Dear Experts,

I have used the following custom CSS to highlight alternate rows in crosstab in design studio. However, it is not working for me. I have gone through the forums but that didnt work either.

Please see the CSS below.

{ .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellTotal, .sapzencrosstab-DataArea .sapzencrosstab-DataCellTotal{ background-color: #F0AB00; }

Any suggestions.

Regards

Sumit

[TammyPowlas]

Sumit - it looks like you are trying to do CSS on the row header, not the rows itself.

Look at this example from Dinesh using a spreadsheet component - he is checking every other row:

https://blogs.sap.com/2016/09/23/customize-your-spreadhseet-using-css/

[sumitdubey]

Thanks Tammy for your prompt response.

The CSS mentioned in the link is for the spreadsheet component and doesnt seem to work for Crosstab.

Sumit

[TammyPowlas]

Yes, Sumit, I understand that; my point is in your question you are pointing to a row header area - and recommend you use similar logic as the spreadsheet component (even vs. odd)

[Former Member]

I use the following code to achieve this:

.myCrosstab .sapzencrosstab-RowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(odd) td {background: #ffffff!important;}

.myCrosstab .sapzencrosstab-RowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(even) td {background: #f1edea!important;}

.myCrosstab .sapzencrosstab-DataArea tr:nth-child(odd) td {background: #ffffff!important;}

.myCrosstab .sapzencrosstab-DataArea tr:nth-child(even) td {background: #f1edea!important;}

The whole code to make my crosstabs nice-looking is below:

.myCrosstab .sapzencrosstab-RowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(odd) td {background: #ffffff!important; text-align: left; }

.myCrosstab .sapzencrosstab-RowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(even) td {background: #f1edea!important; text-align: left;}

.myCrosstab .sapzencrosstab-DataArea tr:nth-child(odd) td {background: #ffffff!important; font-size: 12px; color: #666666; text-align: center; }

.myCrosstab .sapzencrosstab-DataArea tr:nth-child(even) td {background: #f1edea!important; font-size: 12px; color: #666666; text-align: center;}

.myCrosstab .sapzencrosstab-TableDiv {border: 0px!important;}

.myCrosstab .sapzencrosstab-VScrollTable {border: 0px!important;}

.myCrosstab .sapzencrosstab-HScrollTable {border: 0px!important;}

.myCrosstab .sapzencrosstab-HeaderCellDefault {border: 0px!important; text-align: left; }

.myCrosstab .sapzencrosstab-DataCellDefault {border: 0px!important;}

.myCrosstab .sapzencrosstab-HeaderCellDefault,.myCrosstab .sapzencrosstab-DataCellDefault {border: 0px; !important}

.myCrosstab * {border: 0px!important;}

.myCrosstab .sapzencrosstab-DataCellAlternating

,.myCrosstab .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellAlternating {background: white!important;}

.myCrosstab .sapzencrosstab-DimensionHeaderArea,.sapzencrosstab-ColumnHeaderArea {font-size: 12px; color: #aa005f;}

.myCrosstab .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderRow {font-size: 12px; color: #666666; height: 24px ;}

Plus, I change the crosstab setting Always Fill to false in Properties. This makes sure that your crosstab doesn't have the outside border.

[Vidhya]

Hi Sumit,

Please check below link for your requirement,

https://blogs.sap.com/2013/07/21/design-studio/

Please let me know if you are facing any issue.

Regards,

Vidhya.C

[sumitdubey]

Thanks Vidhya,

I tried this but it is not overwriting my default CSS of the crosstab. I can still see the rows shaded with gray color which comes by default in crosstab.

[Vidhya]

Can you share me your CSS code?