Help Aligning Columns in Rows to Create a Data Table

Hello,

I am trying to create a data table with headings. The best way I have found of achieving this is to use a container with two “Row” items. The first “Row” acts as headers and the second “Row” is repeated and holds the data. I can’t seem to get things to align ? the first column is pushing the data to the right and the columns become all mis-matched. I also don’t know how to align the contents of “Row” 1 to the contents of “Row” 2.

This seems like it should be pretty straight forward to create a data table - am I missing something ? - could someone tell me how to align this data or a better way of doing it.

1 Like

Hi! You would need to define specific widths for each cell so that they don’t wary based on content length. By default, cell width is set to “auto”, which means it grows and shrinks with its content. Set e.g. each column to be precisely 25% by choosing the a:b option for cell width and they should start aligning correctly.

Screenshot 2022-02-21 at 12.45.26

Hello Mevi

I have done this - please see screenshot attached.

Hey!

Seems like there’s something wrong with the percentages and this would be a bug. Thanks for pointing it out! I got this working by using pixels in the cell width instead of a:b (in Mevi’s screenshot) for both the header row and the data rows, not sure if this will work in your case but at least it’s a small workaround for now :slight_smile:

1 Like

I encountered the same issue multiple times.
Using pixels for the width of the cells (in the style tab) indeed solves this problem of unalignment.

I am afraid it is not as easy as setting the pixels, because the available screen width is very different for the individual devices.
For example: if it looks well on a large iPad, it will look messy on a small iPhone.

@Cecilia : FYI, the issue is already in the bug tracker since december:

2 Likes