Align columns between separate tables (due to adding rows in List View)

I'm having an alignment issue between the rows of a table. The source of the issue is the fact that every row is a separate table caused by a List View. The header can either be attached to the first object in the list view with a visibility constraint based on the first object or as a separate table above the List View. In both cases the alignment brakes when scaling the browser window down, where the rows all scale responsively based on their own content. Is there a way to make sure the alignment stays fixed across different tables? Or as an alternative option a way to make the columns fixed in width across different tables? See the image for the current situation:
2 answers

Maybe you can try the table-layout property.


I went to the tables.scss file and saw that there is already class setup to use this property. Try adding the class "table-fixed"


Here is the styling for it.

// Makes the columns fixed
table.table-fixed {
    table-layout: fixed;




Hi Sytze,

The only option I've used in the past that resolves this issue is to generate the full HTML by yourself and output it using the "format string" widget (render as HTML)

This does mean that you lose the ability to edit any fields.