The top RG in the above screenshot has min widths as a percentage but clearly the percentage is relative to the current cell, not the entire RG width.
The bottom RG in the above screen shot has min widths in pixels which is essentially the effect that I want but is not responsive relative to screen width.
Im trying to do this to create a header row for a table (built with another RG) so I want to have the widths be a percentage of the whole so they can align with the RG below.
Note 1: I tried to use the table element for this but could not as it is useless.
Note 2: I need my header row to be in an RG for this particular use case (I have my reasons)
Note 3: I know I could achieve this with javascript but just want to check if there is a native bubble way first.
Having a table header in a separate RG is generally a headache for responsiveness.
I would put the header into the same RG as the content, set it as invisible by default, and show it if Current cell’s index is 1. This ensures that the header cells follows the same responsiveness as the rest of the table.
If you don’t want to go down that route, you can set the width of the text elements dynamically (RG width * percentage) using some custom CSS, and set cells to wrap to content.
Thanks @nico.dicagno
I think I’ll have to go with your second option. The first option doesn’t work for me. I wasn’t clear enough in my original post. The main RG is a vertical RG (1 column x lots of rows) whereas my header row is a horizontal (1 row x lots of columns) (I have reasons for needing it this way). Given the different layouts, putting the header RG into each cell of the RG doesn’t help me solve the alignment issue.
