Formatting of Crosstables in Design Studio

[alexdc12]

Hi All

I have a new requirement whereby certain columns should be certain colours (Background colour) to highlight groupings. The Header and the cells need to have same background colour.

Below is how it is currently formatted in Excel.

Any ideas on this one? I did find some posts about setting colours via CSS but it didn't work too well for me. As far as I'm aware there is not a custom component that can do this either?

Thanks All

[Former Member · Accepted solution]

Hi Alex,

You can try the following css:

table.sapzencrosstab-DataArea tr td:nth-child(10n+3) {background: #A52A2A !important;}

table.sapzencrosstab-DataArea tr td:nth-child(10n+5) {background: #A52A2A !important;}

table.sapzencrosstab-ColumnHeaderArea tr td:nth-child(10n+3) {background: #A52A2A !important;}

table.sapzencrosstab-ColumnHeaderArea tr td:nth-child(10n+5) {background: #A52A2A !important;}

Best,

Alfred

[alexdc12 · Accepted solution]

HI Alfred

That works great, I was using similar code last time but I was trying to put this into its own Class if that's right?

for example

.table{

your code here

}

Then using .table as css class on crosstab.

Is there anyway to contain this as I use a generic CSS file for all my apps and just call class's when I need them ?

Thanks though!

[Former Member · Accepted solution]

Hi Alex,

Glad that helps.

To specify the crosstab you want to apply, I usually use id selector. You can take a look for the discussion here.

Best,

Alfred

[alexdc12 · Accepted solution]

Hi Alfred

Just noticed something this morning, The last column of my table is also highlighted?

I am using the following code

[Former Member · Accepted solution]

Hi Alex,

How many columns you have?

If you have 13 columns, then 10n+3 will have effect on the 3rd column and 13th column.

If the that's the case, you can change to 100n+3 for example.

One more thing, if you have scroll bar, you have to set "pixel-based scroll" property of the crosstab to true. Without that, the column/row will be recalculated when you scroll.

Best,

Alfred

[alexdc12 · Accepted solution]

That makes sense! Thanks for the help! Have a great weekend