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{
10 |10000 characters needed characters left characters exceeded