Remove crosstab borders with CSS

[Former Member]

Hello,

I am trying to remove all the borders of my crosstabs with CSS. I found the following link http://scn.sap.com/community/businessobjects-design-studio/blog/2013/07/21/design-studio which is already very helpful with all the borders except for the external borders. The following code removes all of the internal borders, but not the external ones. Does anybody have an idea?

.myCrosstab{
font-size: 16px;
background-color: white !important;
color: red;
border: 0px !important; 
}

.myCrosstab * .sapzencrosstab-DataCellDefault, .sapzencrosstab-HeaderCellDefault { 
border: 0px  !important; 
} 
.myCrosstab * .sapzencrosstab-HeaderCellDefault { 
border: 0px  !important; 
} 
.myCrosstab * .sapzencrosstab-TableDiv { 
border: 0px  !important; 
} 

(I tried this with a CSS stylesheet that contains many other classes and one that was completely blank except for the code above, same result in both cases).

[Former Member · Accepted solution]

Hi Tammy,

thanks for your response, I tried removing the myCrosstab but that did not make a difference...

@ David: thank you too, this removed some more borders, but still not all of them. Also the font of the texts in the left column are different to the header row...

[Former Member · Accepted solution]

ok, so you are using the "Blue Crystal" Theme. That is a difference. I was testing your css code with the "Platinum" Theme...

So I would suggest to backup your "crosstab css code" and maybe use the following as a starting point:

.myCrosstab .sapzencrosstab-TableDiv {border: 0px;}

.myCrosstab .sapzencrosstab-VScrollTable {border: 0px;}

.myCrosstab .sapzencrosstab-HScrollTable {border: 0px;}

.myCrosstab .sapzencrosstab-HeaderCellDefault

,.myCrosstab .sapzencrosstab-DataCellDefault {border: 0px !important;}

.myCrosstab .sapzencrosstab-DataCellAlternating

,.myCrosstab .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellAlternating {background: white !important;}

.sapzencrosstab-DimensionHeaderArea, .sapzencrosstab-ColumnHeaderArea {font-size: 14px; color: blue;}

.myCrosstab .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderRow {font-size: 14px; color: orange;}

.myCrosstab .sapzencrosstab-DataArea .sapzencrosstab-DataCellDefault {font-size: 14px; color: brown;}

When using the "Blue Crystal" Theme, you have to use "!important" more often in comparison with the "Platinum" Theme.

David

[Former Member · Accepted solution]

works perfectly, thanks!

[Former Member · Accepted solution]

You might also want to check out a related thread: Crosstab zebra lines

It is also about CSS adjustments when using the Blue Crystal Theme to achieve alternating background colors for rows (zebra lines).

[Former Member · Accepted solution]

Just a small correction:

instead of:

.sapzencrosstab-DimensionHeaderArea, .sapzencrosstab-ColumnHeaderArea {font-size: 14px; color: blue;}

should have been:

.myCrosstab .sapzencrosstab-DimensionHeaderArea

,.myCrosstab .sapzencrosstab-ColumnHeaderArea {font-size: 14px; color: blue;}

...your custom css class at the beginning to change the formatting only for those crosstabs which have this custom css class assigned.

[Former Member]

Hi Tammy and David,

thank you for your quick responses, I am already a step ahead but not yet at the desired state.

@ Tammy: Your crosstab is exactly what I want mine to look regarding the borders, unfortunately mine don't look like yours.

@ David: I added the 3 lines and it looks better now.

As you can see on the following pictures some of the borders are still showing, especially the ones with data cells. The first crosstab is a mix of data and text cells, the second one only has data cells:

This is my code (I experimented a bit more in the meantime compared to my code above):

.myCrosstab{
background-color: #F7F7F7 !important;
border: 0px;
}

.myCrosstab .sapzencrosstab-TableDiv {border: 0px;}

.myCrosstab .sapzencrosstab-TableDivBackground {
background-color: #F7F7F7;
border: 0px;
}

.myCrosstab .sapzencrosstab-VScrollTable {border: 0px;}

.myCrosstab .sapzencrosstab-HScrollTable {border: 0px;}

.myCrosstab * .sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellDefault, 
.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellAlternating, 
.sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellAlternating, 
.sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellDefault,
.sapzencrosstab-DataCellDefault .sapzencrosstab-TableDiv,
.sapzencrosstab-DataArea .sapzencrosstab-RowHeaderArea,
.sapzencrosstab-DataCellDefault .sapzencrosstab-DataCellContentDiv,
.sapzencrosstab-DataCellAlternating {
font-size: 16px; 
background-image: none !important; 
background-color: #F7F7F7 !important;
border: 0px #F7F7F7 !important;  
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7F7F7', endColorstr='#F7F7F7') !important; /* For IE users */ 
} 

Any more ideas?

[TammyPowlas]

Hi Jan -

Instead of using the myCrosstab class, I just cut and paste the following from your initial post into the custom.css file :

.sapzencrosstab-DataCellDefault, .sapzencrosstab-HeaderCellDefault { 

border: 0px  !important; 

} 

.sapzencrosstab-HeaderCellDefault { 

border: 0px  !important; 

} 

.sapzencrosstab-TableDiv { 

border: 0px  !important; 

} 

and it seems to work the way you want.  Maybe consider taking it out of the myCrosstab class like I did?

[Former Member]

You have a lot of css there... but I was able to reproduce your screenshots by copy/pasting your css code.

Add the following css definition at the end (these make things happen: borders disappear):

.myCrosstab .sapzencrosstab-HeaderCellDefault

,.myCrosstab .sapzencrosstab-DataCellDefault {border: 0px;}

David

[Former Member]

Hi Jan,

To remove the remaining border(s) in your crosstab you can add the following into your custom css file:

.myCrosstab .sapzencrosstab-TableDiv {border: 0px;}

.myCrosstab .sapzencrosstab-VScrollTable {border: 0px;}

.myCrosstab .sapzencrosstab-HScrollTable {border: 0px;}

In general whenever possible I would suggest you not to use !important. It is a general css best practice to use it only if there is really no other option.

Regards,

David

[TammyPowlas]

Could you screen shot or show what you mean by "external borders" that you are trying to remove?

I tried your CSS code on my test crosstab and it seems to work: