Forum Academy Marketplace Showcase Pricing Features

Displaying tabular data - Not a repeating Group

The element in HTML is used for displaying tabular data. You can think of it as a way to describe and display data that would make sense in spreadsheet software. Essentially: columns and rows. In this article, we’re going to look at how to use them, when to use them, and everything else you need to know.

Name ID Favorite Color
Jim 00001 Blue
Sue 00002 Red
Barb 00003 Green

The code for this actually looks like this:

<table><tr>
<th>Name</th>
<th>ID</th>
<th>Favorite Color</th>
  </tr>
  <tr><td>Jim</td>
<td>00001</td>
<td>Blue</td>
  </tr>
  <tr>
<td>Sue</td>
<td>00002</td>
<td>Red</td>
  </tr>
  <tr>
<td>Barb</td>
<td>00003</td>
<td>Green</td>
  </tr>
</table>

Anyways, I want to create a static table with TD elements that grow in height to match the respective ROW of data that they are in.

Currently in Bubble, I am inserting a group element to represent the and then inserting individual Text Elements to represent the .

The issue is that if one of the Text elements in that group has substantially more data, then the design comes out VERY wacky. This is because the other text elements are not growing in height and flowing with the larger text element in that group.

Below is a screen shot of what I am experiencing:

As you can see the Larger group element has a Gray border
Then each text element has its own Border. Because the two text elements in the group are not actually linked to each other, I am seeing that their heights are not adjusting.

How can I fix this? Should I resort back to HTML for displaying tabular data?