[AlanParticipant]

Hi Support Team,

As always, thank you for your world class support.

I am using <table> within Content Band, and am noticing an interesting artifact related to horizontal spacing with <td>.

The first column starts at the same horizontal location for all instances of this code. But the second column of the table does not always begin at the same left margin (despite an align left). In digging down, it appears that the left margin is being set by something related to the width of the largest text item to be displayed in that column. And changing the width of the largest item in the column changes where the left margin begins. Note that in my implementation, the first column data never changes, so even if this were a general issue for all columns, it is not something that I would notice.

Is this a content band artifact or is this something unrelated to X in my use of <table> and <td>?

Many thanks!

[AlanParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

I have checked and it looks a bit weird to me as well but I couldn’t find anything that might cause the issue. Still as they are on different pages, something might causing this like font-size of icon, text indent or something else that I couldn’t find as well.

Thanks!

[AlanParticipant]

Thank you Rupok for the fast reply. Much appreciated!

Some additional detective work. For each pages the table has identical:

X-column.x-1-3: 420 x 439
x-container-fluid.max.width: 375.3 x 40
table: 375.3 x 241
tbody: 375.3 x 240
tr: 375.3 x 40

Now, when I get down to the <td> level, things change just slightly. And this slight variance appears to be dependent on the size of the largest <td> entry.

So, for the computed width of the fields:

<td> (column 1): 66.1667 x 40 with one and 69.1169 x 40 for the other.
<td> (column 2): 309.113 x 40 with one and 306.183 x 40 for the other.

It appears that the more characters in the <td> field, the more space is automatically allocated to the field. Despite left align, and nothing running over any margins, and the CSS set the same for each page.

Is the dynamic allocation of column space in a <table> something impacted by Content Band or X-Column?

Once again, many thanks!

[RadModerator]

Hi there,

No, they are independent from content band or x-column. If you didn’t specify a width from your top <td> then the browser will automatically allocate the width depending on the content. Hence, you should specify the width for every top <td> that you wish to be fixed.

Top <td> is always the one on the first row, but it’s not limited to <td>. It can be <th> too ( if the table has table heading ).

Example,

<table>
<tr> <td style="width:90px">ICON</td> <td>CONTENT</td> </tr>
<tr> <td>ICON</td> <td>CONTENT</td> </tr>
...
..
.

As you’ll notice, we only added the width on top <td> on first <tr>. That means the ICON cell will remain in 90px, while the CONTENT cell width will vary. Example, if your table total width is 800px, your ICON cell is 90px, then the CONTENT cell will be 710px. But you don’t need to specify 710px since the browser will automatically calculate that minus the 90px.

And you don’t need to add specific width to the rest of <td> of the same column, because it will inherit the width of the first <td>.

Hope this helps.

[AlanParticipant]

WOW! Just amazing support. Thank you.

To my CSS, I added

td, th {
width: 10px;
}

Works great. Thank you very much. Beyond impressive describes both the speed of response and the knowledge of guidance.

Many thanks!

[Rue NelModerator]

Hey There,

You’re most welcome! We are just glad we were able to help you out.
We really appreciate for letting us know that it has worked for you.

Cheers.

[Author]

Posts