Show TOC

Defining Column WidthLocate this document in the navigation structure

The API of sap.m.Column implies that width can be any valid CSS size, for example, 100px, 6em, 25%. The default value of the width is empty and this makes the column flexible which means it covers the remaining space.

There are three important things that you should to define the width of the column properly.

  • While defining the column width you can use percent values but you should be careful with percent values. Because, maybe this value fits to desktop screen well, but maybe not to mobile devices. In this case using absolute width(e.g. 200px, 4rem) can be better.
  • Leave the most important column's width empty if your table demand pop-in. Let's say you have 100% width table with four columns each has 200px width and viewport is 800px wide. Everything is fine. We resized the viewport to 500px. We can still show two columns nicely with setting the rest two columns to go pop-in. But after two columns go to pop-in total width of two main columns is 400px but the viewport is 500px and table is 100%! In that case browser decides how to handle this. Current Chrome version increases the last column width and IE increases the first column width. But if we have Selection or Navigation these are also columns and browser can change the width of these column and that can look strange. So the best solution is leaving the most important column's width empty that it can take the much space as it can. In our example it will be 300px and all will be fine.
  • Do not try to give percent width to all columns even if it reaches 100% total column width. What, if there is a Selection(3rem width), Navigation(3rem width) or Deletion(3rem width)? In this case, the total width would be 100% + 6rem. Or if the total width is less than 100%, for example one column with 20% and the other column with 40%, the total width would be 60% + 6rem. By default, Table itself is in fixed layout mode and 100% width. The browser needs to decide how to share the width as it cannot fit to 100% width. In some cases browsers are smart and handle this correctly or it just looks correctly, but you should try to avoid such a use to get a cross browser result. As in 2nd point hit leaving the most important column width would fix this problem because then column will be flexible and cover the space.