CODEWITHSUNDEEP
csssapui5
thatsnotmyname
thatsnotmyname

Reputation: 81

SAPUI5 table formatting

I am quite new in CSS and SAPUI5. Although making good progress, I am having a hard time applying style options to SAPUI5 tables. My action is aiming on formating a specific table having id tbl1. In index.html, I gave custom css style definition like:

#tbl1{
    font-size: 200%;
    font-weight: bold;
}

#tbl1 tr{
    font-size: 150%;
    background: green;
}

That changed table header font size and background of cells but not the font size within the cells... What's the best way to do so?

To give u an outlook on what I eventually want to achive: Besides changing font size of rows and headers

Upvotes: 1

Views: 6128

Answers (1)

Tim Gerlach
Tim Gerlach

Reputation: 3390

In SAPUI5 it is best practice to attach CSS classes to your controls. Unfortunately you can´t rely on the ID´s you assign to your controls for manual CSS-styling since the ID´s are not always assigned to the control you expect and sometimes ID´s are assigned relative to your view name e.g. in case of reusable views.

Let´s assume you have a table and content you want to apply CSS to:

var table = new sap.m.Table();
table.addStyleClass("myCustomTable");

And your Stylesheet could look like this:

.myCustomTable {
    font-size: 200%;
    font-weight: bold;
}

You can attach CSS classes to your columns and items aggregations as well which reflects <th> and <tr> styles.

Upvotes: 2

Related Questions