Table-cell: how to set height to fit content?

Hey, I’m trying to use this comparison table template (link below) and have tried to set all the possible height settings to auto for all elements (so that the content does not overflow into the cells below) but it doesn’t seem to work? The row height stays fixed.

It would be so greatly appreciated if someone can help to figure out what setting in this template is preventing the table-cell to fit to content.

Thanks so much!


Here is my site Read-Only: LINK

To fix the issue of table rows having a fixed height in your Webflow comparison table template, ensure all parent elements (like table, table-row, or any wrappers) have their height set to “auto” in the Style Panel. Additionally, check for any CSS grid or flexbox settings that might be enforcing a fixed height, like “Min Height” or “Overflow Hidden,” and adjust or remove them. If the problem persists, inspect the template’s custom code (if any) for specific styles targeting the table or rows. If you’re still stuck, feel free to share more details, and I’d be happy to assist further.

1 Like

Thanks so much, yes have tried auto on everything - it seems the far left column and the rest of the table and not connected, so adjusting the .jr-compare_results-row-container grid-template-rows to auto, misaligns the rows? See screenshot:

Any other ideas will be appreciated, thanks!

Do you have your readonly designer link?

Thanks!, here it is: Webflow - Fund comparison

I see, column 1 is a separate grid.

You’ll either need to force each cell to a specific size with overflow hidden in order to prevent misalignment, or use a technique like CSS sub-grids which allows you to do grid alignment against a parent grid.

It’s a bit un-intuitive to implement sub-grids on Webflow, but I’ve some notes and a demo here.

1 Like