Hello Shraim,

If you look carefully to a table record, you can see that it's just a HTML table and there you can apply all the css properties.
As a table property, you can only control the full table width..Although, you can use an inline CSS in the colums you want to control, using the external properties.
For example:



Hope this helps.

Kind Regards,
Gonçalo Martins

Hello,

Happy new year to everyone.

Selected the table cell and then define the width. can be % or px's.
You dont need to use it as extended property because there is a width option in the table cell ;)

Thank you everyone. I am using the Width property of the Cell but I am trying to understand the rendering behavior. In the attached image, the width of the the column "Cost Center" in both tables was set to 20%. Yet in each table the column seems to adjust its width (best fits) its contents. 
1- Is this behavior by design?
2- Is there a way to have more granual control over the widths of the columns of the table?
3- At design time, do I need to set the width of just one Cell in the column or I have to set the width of both Cells in the column?
 

Hello Shraim,

I think that your problem here is related to the fact that you might not defined the width percentage to all the table columns and maybe the table width to, which you should have set to 100%. 
Another possible problem is the fact that you can have the cell texts breaking the set width (the fields Subjects and Description are some good suspects), and to avoid this you can control it by using the CSS property white-space.
Note also that, since you are working with percentages is more difficult to align both tables because you don't have a fixed size for the column but a variable size according to the occupied space in where the table is placed.
Hope this explanation helps you in something.

Kind Regards,
Gonçalo Martins

 
 

Hi Gonçalo,

I pressed some key wrongly after the reply and it submited the post. I already edited it :)

Thank you Luis and Goncalo. I really appreciate your help guys. It is very valuable knowledge. I will try to use both of your suggestions and hope it works out well...

Hi.
To apply the CSS property white-space, I used the Style Sheet Editor to create the style NoWrapText (see first image). Then I applied the NoWrapText style to the table's HeaderRow (applying it to the container in each cell) and I also applied the NoWrapText style to the table's data Row (applying to the expression in each cell). I did the same to the second table. I also set the width of each cell (in both rows) to a % value such as the total of the values is 100%.
The second image shows the result. As can be seen, the two tables still differ in their column widths.
Is there no other way to control this behavior ?

 
 

Hi,
As others have said, the only way to ensure that the cells mantain the size is to give them *fixed* sizes (say, 200px). Also, as others have said, this only defines the *minimum* size, so if you want to have a maximum size you have two options:

1. use the Substr function to crop the string;
2. wrap the Text widget in a Container and add the style overflow:hidden to the Container

For more on the last point, check this page: https://www.ezineasp.net/post/HTML-Div-Tag-Overflow-CSS-Style-Scrollbars.aspx

To show the text that won't fit the fixed sized cell you can then use a tool tip, by adding a "title" extended property to the text box.

Thank you everybody. I am sure this thread will prove very valuable to anyone facing issues in understanding sizing of the TableRecords. Summarizing my understainding of the above:

1- When cells width is not set or is set in %, the default behavior for the the cell is to acomedate the content meaning the cell will still grow or shrink depending on its content (cell's minimum and maximum will change depending on content not on defined width)

2- When cells width is set in pixels, the cell width will maintain this width as a minimum (cell will not shrink) but the cell will still grow to accomedate bigger content (cell's minimum will not change but its maximum will change depending on content ).

3- to force a cell width respect the set width in pixels as its maximum; enclose the text in a container and apply to the container the CSS overflow:hidden

4- to change how white space (inclding line breaks and wrapping) is handled in the cell, use the CSS white-space

Thank you both Goncalo and Luis. A special thanks also for Carlos as your followup explanation (specially the tip about the "tool tip") was a prefect complement to the great explanation by Goncalo and Luis. I wil apply this feedback and promise to update you all. 

Oh, sorry, my mistake I didn't explain it correctly.

You can't force a table cell (HTML = <td>) to have a maximum width, you can only force it to have a minimum width. A cell will always expand its width (and height) to accomodate its contents.

The workaround is that you can force a <div> (a Container widget) to have a maximum size (either width or height, or both).

If you put a <div> inside a <td> and set its style to, say, "width: 200px; overflow: hidden;", whatever content inside it that exceeds 200px in width will be cropped. The net result is that the <td> won't expand because its content never expands either.

** A BIT OFF-TOPIC HTML MINI GUIDE **
If you look carefully, the width style doesn't really set the <div> width, it actually sets its maximum width.
An empty <div> will have a width of 0 and will expand to accomodate its content up to the defined maximum width.
This is why you still need to set the width in the table cell but now it's to prevent it from shrinking too much.
 Another way to do it would be to use the min-width style to set the minimum width but  IE at least up to version 8 ignores it.

You can also set the maximum height of a div, just use the height syle. There's also a min-height style to set the <div> minimum height and IE ignores it too.

Also, if you don't set either the width or the height in a <div>, it will behave pretty much like a <td>.


 

This topic is becomming like a CSS discussion so, you should take a look at this excellent site where you'll get all about this and also try them in a html editor provided by them:

https://www.w3schools.com/css/

Enjoy it  :)

I want to continue this thread to the end so not to waste the time and effort of everyone participating. Following the great advise and explanation from this thread, I di the following:

1- created a style HideOverFlowText


2- removed all width settings from the table header cells and row cells

3- for the columns I need to control their widths, I enclosed the content of each cell in a container (both the header and row cells)

4- I applied the HideOverFlowText on each of these containers

5- I used the extended properties of each container to set its desired width (following image)



6- at run-time I got the following behavior for these columns. While the container in each cell seems to have confirmed to its set width in pixels (all are 100px except for Description set to 200px), the width of the table column is still wider than the width of the container in its cell !!!

Check the table width property. If you have for example the value set to 100% and the columns set with a specific width you can (and will) have problems, since you are working with percentage and pixels, ie, different units.
Another thing you can do is to the the property white-space: normal, this case the text will only occupy the cell width and will only addapt the cell height.

Hello,

For runtime tests you can use internet  explorer developer tools (IE) or firebug (Firefox) to edit html - in your case table column widths
Both have F12 key as shortcut.

Hello,
The same for Chrome :)
Nowadays we should test at least in the three main browsers..

That's a good summary for one of the several approaches to take when we want to do something like you wanted.
I'm sure it's gone be helpful for some new guys.

have you tried toying width:

table-layout: fixed;

In a fixed table layout, the horizontal layout only depends on the table's width, the width of the columns, and not the content of the cells

Yes - the table layout was a quick fix - just needed to set individual column widths in pixels.
Thanks you!

Hi Gayatri,

This was an over 3yo thread. It's better not to resurrect them, especially not with a mere "thank you".