Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

Vertical Alignment of data cells in a crosstab with CSS

Hello,

I already searched all relevant topics and discussions but I couldn't find a solution for the following problem:

I applied some formatting to my crosstabs and everything is like I want it to be now, except for the vertical alignment of data cells (measures). This is different to data coming from dimension fields. In the image below

I already tried to include the alignment statement in my CSS, but it didn't help .This is all the CSS that I am using for the Crosstabs:

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

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

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

.myCrosstab .sapzencrosstab-HeaderCellDefault

,.myCrosstab .sapzencrosstab-DataCellDefault {
border: 0px !important;
border-bottom: 1px solid #dddddd !important;}

.myCrosstab .sapzencrosstab-DataCellAlternating

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

.sapzencrosstab-DimensionHeaderArea, .sapzencrosstab-ColumnHeaderArea {font-size: 16px;
color: #444444;
}   

.myCrosstab .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderRow {font-size: 16px;
color: #444444;
}

.myCrosstab .sapzencrosstab-DataArea .sapzencrosstab-DataCellDefault {font-size: 16px;
color: #444444;
vertical-align: middle;
}

/*
.myCrosstab{
background-color: #F7F7F7 !important;
font-family: Arial !important;
font-size: 16px !important;
color: #444444 !important;
text-align: left !important;
vertical-align: middle; 
}
*/
.myCrosstab .sapzencrosstab-TableDivBackground {
background-color: #F7F7F7;
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 {
height: 30px !important;
font-family: Arial !important;
font-size: 16px !important;
color: #444444 !important;
text-align: left !important;
vertical-align: middle !important;  
background-image: none !important; 
background-color: #F7F7F7 !important;
border: 0px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7F7F7', endColorstr='#F7F7F7') !important; /* For IE users */ 

Thank you in advance,

Jan

Former Member
replied

Try adding line-height : 30px to these following two CSS selectors:

.myCrosstab .sapzencrosstab-DataCellDefault

and

.sapzencrosstab-DataCellAlternating

0 View this answer in context

Helpful Answer

by
Not what you were looking for? View more on this topic or Ask a question