Formatting a crosstab with CSS

[Former Member]

Good day:

I'm trying to do a zebra like format in the columns of a crosstab (as shown in the image), I've been investigating about this, but I only found how to do a zebra lines.

I even tried to search with Internet Explorer some class that affects the columns of the data cells, but I didn't find anything.

I don't know if there is some way to archieve this with CSS or if there is any way to set a background color for an entire column having the column ID.

Thanks so much in advance to all of you for any help that could give me because I've been investigating a lot about it and I don't find anything.

Greetings

[Former Member · Accepted solution]

Hi Andoni,

Please use the below CSS, i hope it will be helpful.

.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderRow .sapzencrosstab-HeaderCellDefault {
    background-color:#00f !important;
}
.sapzencrosstab-DataArea  .sapzencrosstab-DataCellDefault:nth-child(odd){
    background-color:#777 !important;
}
.sapzencrosstab-DataArea  .sapzencrosstab-DataCellDefault:nth-child(even) {
    background-color:#aaa !important;
}

Thanks,

Ganesh

Message was edited by: Ganesh Babu

[Former Member · Accepted solution]

Thank you very much, that's exactly what I wanted to achieve.

Greetings

[former_member194504]

Hi Andoni,

.sapzencrosstab-DataCellDefault, .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellDefault {
    background-color: blue !important;
}
.sapzencrosstab-DataCellDefault {  
     background-color: black !important;  
}  
.sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellAlternating {  
    background: white !important;  
}  
.sapzencrosstab-DataCellAlternating {  
    background: white !important;  
}  

This will do the work. If you want to affect only the specif crosstab make sure that you append the id of the crosstab before.

Thanks,

Nithyanandam

[Former Member]

Good day:

Thanks for the answer I tried it in Design and the result is this:

I want to achieve the same effect but in the columns instead of in the rows, do you know if it's possible to do that?.

I didn't find any class that could affect only the columns.

Thanks in advance for the help.

Greetings

[former_member194504]

Hi Andoni,

.sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellFirstInCol, .sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellFirstInCol:nth-child(odd){


background-color: black !important; 
}


.sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellFirstInCol, .sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellFirstInCol:nth-child(even){


background-color: blue !important; 
}

something like this

Thanks,

Nithyanandam

[Former Member]

Thanks for the code, it may be helpful.

Greetings and thanks for all the help that you provided me.