Skip to Content

Displaying % sign along with the value in a Crosstab

Jan 29 at 02:46 PM


avatar image

Hi Experts,

I have a Crosstab which has three dimensions as rows and two measures as columns.

Column A : Total no. of employees

Column B : Percentage of employees.

The requirement from the business is to show “%” sign along with the Percentage value e.g. Column B values like 64.3%.

In order to show the % sign, I have used the following script in my CSS

.X .sapzencrosstab-DataArea>tbody>tr:nth-child(1)>td:nth-child(1):after{



With this script, % sign is displayed along with the value but after the value like



What should I change in the script to show “%” sign along with the value.

I am using SAP Design studio 16.5.0.

Any help will be greatly appreciated!!


10 |10000 characters needed characters left characters exceeded

Hi - what is your data source? Does the % need to be in a script, or would having it be in the header be enough? See


Thanks Tammy for your response. My Data source is a BEX query.

"%" sign is not enough in the header but is required with each value.


* Please Login or Register to Answer, Follow or Comment.

2 Answers

Best Answer
Tammy Powlas
Jan 29 at 07:20 PM

Can you look at /try Vidya's post?

CSS looks similar, but a "before" where you have "after"

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

Hi Tammy,

Thanks for your reply. The solution worked!!. But I did a small change in my CSS. writing it here, may be useful for someone in future.

.crosstabpercent .sapzencrosstab-DataArea>tbody>tr>td:nth-child(even).sapzencrosstab-DataCellDefault>div:after {

content: "%";


My crosstab, for some dimensions has a value and for some dimension has a blank. The problem is, with values I want to show % sign while with blanks nothing. Right now with the above code, it’s showing “%” sign even with blanks. Is there a workaround to put “%” sign conditionally ?

Many thanks!!

Arijit Das Jan 30 at 05:56 AM

Make a small change in your CSS as below:

.X .sapzencrosstab-DataArea>tbody>tr:nth-child(1)>td:nth-child(1) div::after{
Show 3 Share
10 |10000 characters needed characters left characters exceeded

Hi Arjit ,

The above CSS class for crosstab.

Can we do it same for the chart using CS class.

Subbarao Bommineni

I would like to request you to raise a separate thread with specific requirement and a few screenshots if possible.


Hi Arjit,

Thanks for replying to me.

Here is the thread as already raised for help.

could you please look into and help me on this please.