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.