Skip to Content
0

Change color for each column for crosstab in design studio

Jan 27, 2017 at 11:48 AM

1.2k

avatar image

Hello friends,

I want to change the color for each column for crosstab in design studio.

Say for example for first column I want to set green color,

for second column I want to set red color, and so on

will you please help me in this? I would really appreciate if you provide solution with code.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

4 Answers

Best Answer
Arijit Das Dec 04, 2017 at 09:47 AM
0

I used DS 1.6 SP5 & Lumira 2.0 Designer SP2 and following css worked for me:


capture.png (50.9 kB)
capture2.png (53.7 kB)
capture.png (7.4 kB)
Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hello Arijit,

Will you also post for how to change colour for dimensions?

0
Vidhya V Jan 27, 2017 at 02:25 PM
0

Hi,

Please find the below URL,

https://blogs.sap.com/2016/12/15/design-studio-formatting-the-crosstab-component/

or

For your example,

First Column,

td:nth-child(1) {

background-color: Green;

}

td:nth-child(2) {

background-color: Red;

}

Regards,

Vidhya.C

Share
10 |10000 characters needed characters left characters exceeded
Harshil Joshi Jan 30, 2017 at 07:57 AM
0

Hi Vidhya,

How we can achieve it for different crosstab, I do not want to apply this on my all crosstab. I just want to apply this only for one specific crosstab only.

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hi Harshil,

Please create new class name for your specific cross tab and apply that class name for it.

Try this code:

.mycrosstab .sapzencrosstab-DataArea td:nth-child(1) { background-color: green !important; }

.mycrosstab .sapzencrosstab-DataArea td:nth-child(2) { background-color: red !important; }

Regards,

Vidhya.C

1
Hans Segers
Jun 20, 2017 at 02:38 PM
0

Hi Joshi,

In the custom css file, add a new class including the syntax to format specific columns in the crosstab, in this example the 3rd column :

.customCrosstabClass td:nth-child(3){

font-weight: bold;

background-color: red !important;

}

In the property "CSS Class", add the name of the class, customCrosstabClass


Hans

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hello Hans,

It is not working for me. Will you please provide a whole css for two different crosstabs and the same I can check?

Appreciate your efforts.

0