Skip to Content

How to resize a table row height in UI5

Hello,

It seems that table row height of UI5 Table is pretty big with lot of white space above and below the text.

Is there anyway I can resize the height of the row with lesser px? I want to apply this seeting only for this table and not all tables.

When I look at its CSS in Chrome Developer tools, I get following:

element.style{height: 49px} is the culprit. How can I make it like 30 px and can apply only to this table?

Thanks !

table-height.jpg (40.3 kB)
table-css.jpg (77.1 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Best Answer
    avatar image
    Former Member
    Feb 20, 2017 at 08:29 AM

    You can set row height in UI5 table.

    https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.ui.table.Table.html#setRowHeight

    BTW, you might be interested in different density modes in UI5.

    https://help.sap.com/saphelp_nw75/helpdata/en/e5/4f729da8e3405fae5e4fe8ae7784c1/content.htm

    Content Densities @ control level : https://openui5.hana.ondemand.com/#docs/guide/13e6f3bfc54c4bd7952403e20ff447e7.html

    Try setting class to your table: class="sapUiSizeCompact"

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 20, 2017 at 11:23 AM

    For particular table css:

    table[id*='tableID'] tr { } //tr css for table id tableID

    table[id*='tableID'] td { } //td css for table id tableID

    table[id*='tableID'] td span { } //span(text) of td css for table id tableID

    hope this help.

    Thanks,

    Akhilesh

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 28, 2017 at 05:31 AM

    I used RowHeight property of sap.ui.table !

    Add comment
    10|10000 characters needed characters exceeded