# Table row/column repeating Sets the properties of the repeated rows and columns in the [table element](/core-resources/bubble-elements/element-properties/web-element-properties/container-properties/table-element.md). The repeated rows/columns contain the table items that you set in the table's data source. ## Visual ### Size Sets the width and height of the element. These properties depend on the layout configuration of the parent element. #### Width/height Sets the width/height of the column/row

Type	Description	Options
Fixed	Sets the width/height of the column/row as a fixed value.	Pixels: sets a fixed pixel value Percentage: sets the value to a percentage of the table.
Fit	The column/row's width and height automatically adjust based on the size of its child elements.	Min: the minimum width/height, defined as a pixel value or percentage of the table. Max: the maximum width/height, defined as a pixel value or percentage of the table.
Fill	The row/columns's width and height fills the available space in the table.	Min: the minimum width/height, defined as a pixel value or percentage of the table. Max: the maximum width/height, defined as a pixel value or percentage of the table.

Type

Description

Options

Fixed

Sets the width/height of the column/row as a fixed value.

Pixels: sets a fixed pixel value
Percentage: sets the value to a percentage of the table.

Fit

The column/row's width and height automatically adjust based on the size of its child elements.

Min: the minimum width/height, defined as a pixel value or percentage of the table.
Max: the maximum width/height, defined as a pixel value or percentage of the table.

Fill

The row/columns's width and height fills the available space in the table.

Min: the minimum width/height, defined as a pixel value or percentage of the table.
Max: the maximum width/height, defined as a pixel value or percentage of the table.

### Configure #### Rows The row property contains two sub-properties, listed from left to right:

Property	Description	Options
Number of rows	Sets the number of rows to display.	Number
Row size	Sets the size property of the row.	Fixed: Sets the width/height of the column/row as a fixed value. Fill: The row's width and height automatically adjust based on the size of its child elements.

### Style Style sets the visual design of the element, including properties such as colors, fonts, borders, shadows and other appearance settings. Styles are shared across elements. When multiple elements use the same style, updating the style will automatically update all elements that reference it. #### Style selector

Select the style to apply to the selected element. #### Edit style

To edit the style, click the edit style icon. The changes to that style will apply to all elements using that style. #### **Detach style** Detaching the style will disconnect the element from the current style, but keep the formatting of the style until you make changes to it. This only affects the selected element.

#### **Overriden styles** You can override a style on one or more elements, using the defined style properties but allowing you to make individual changes to styling properties that apply only to the selected element(s). Overridden styles will be marked with an *Overridden labelI.*

You can reset the selected element's style by clicking the *Reset* icon.

### Appearance #### Opacity Opacity sets the transparency level of the selected element(s). At 100%, the element is fully opaque. At 0%, it is fully transparent (invisible).
* **Opacity affects child elements**: If applied to a container, all child elements inherit the same opacity level. * **Opacity does not collapse the element:** Even at 0%, the element still occupies space in the layout. Unlike hiding an element (using *This element is visible on page load*, a conditional visibility rule, or a hide/show action), opacity does not reduce the element’s width or height to zero. #### Radius Sets the roundness of the selected element(s).

How radius is calculated

The value is applied in pixels and determines the radius of the corner’s arc. Larger values create more rounded corners. The maximum visible roundness depends on the element’s size. If the radius is set to a value greater than half of the element’s width or height, the browser automatically caps it at half of the smallest dimension. For example: * A square (100 × 100 px) with a radius of 50 px becomes a circle. * A rectangle (200 × 100 px) with a radius of 50 px becomes a pill shape. * Setting a radius larger than 50 px in the second example will not increase the curvature further, because 50 px is already half of the element’s height.

**Individual radius** To set an individual radius of each of the four corners, click the Individual radius icon.

### Background Sets the background of the selected element(s) as a color, gradient or image. #### Color Sets the background color in a hex value. You can also set the opacity of the border. Can be a static or the result of a dynamic expression. #### Gradient Sets a gradient color, ranging from a start color and an end color, with an optional mid color.

Linear gradient

A linear gradient is a background effect where colors transition gradually along a straight line. The gradient follows a defined direction (for example, top to bottom, left to right, or at a specific angle). Instead of a single solid color, the element displays a smooth blend between two or more colors across that line.

Starting point	Description
Top	The gradient begins at the top and transitions downward.
Left	The gradient begins on the left side and transitions horizontally to the right.
Bottom	The gradient begins at the bottom and transitions upward.
Right	The gradient begins on the right side and transitions horizontally to the left.
Custom	Allows you to define a specific angle for the gradient direction.

Radial gradient

A radial gradient is a background effect where colors transition outward from a central point. Instead of following a straight line (like a linear gradient), the color spreads in a circular or elliptical shape from the center to the edges. #### Radial gradient types

Type	Description
Circle	The gradient expands evenly in all directions from the center, forming a perfect circle.
Ellipse	The gradient expands in an oval shape, stretching more in one direction based on the element’s width and height.

#### Radial gradient expansion Define how far the radial gradient extends from its center point. They control which edge or corner of the element determines the gradient’s final size, affecting how quickly the color transition spreads across the element.

| Option | Description | | --------------- | ----------------------------------------------------------------------------------------- | | Closest side | The gradient expands from the center until it reaches the nearest side of the element. | | Closest corner | The gradient expands from the center until it reaches the nearest corner of the element. | | Farthest side | The gradient expands from the center until it reaches the farthest side of the element. | | Farthest corner | The gradient expands from the center until it reaches the farthest corner of the element. | #### Stops Sets the start and end point of the radial gradient. By default, it has a *Start* and *End.* Optionally, you can add an intermediate point by clicking the + symbol next to *Stops.*

#### Image Sets an image as the element's background. The image can be a static file uploaded directly in the editor, or the result of a dynamic expression. **Upload** Upload a static image file to use as the background. **Make dynamic** Click the + icon to define a dynamic expression that returns the image to use as the background. ## Interaction ### Workflows Shows the workflows connected to the selected element. Click the + symbol to create a new workflow associated with that element. The list of available events differs based on which element is selected. {% hint style="info" icon="keyboard" %} **Shortcut:** To quickly add a workflow to a selected element, press Cmd+K on macOS or Ctrl+K on Windows. The shortcut defaults to the most likely event for that element type. {% endhint %} ### Visibility #### Visible on page load Enable this to make the element [visible by default](#user-content-fn-1)[^1]. This checkbox makes the element visible every time the page loads or reloads[^2]. Change the visibility of the element based on certain conditions[^3] in the Conditional section in the property editor or with a show/hide element action[^4] in a workflow. ### Options #### Make clickable Allows the row/column itself to be clickable and trigger workflows. When enabled, you can attach click events directly to the row/column. ### Transitions Transitions add animation when a style property changes. Instead of updating instantly, the element gradually shifts from its previous state to the new one over a defined duration. For example, if you reduce an element’s width, a transition can make it smoothly shrink rather than change size immediately.

Transition styles

Transition style	Description
ease	Starts slowly, speeds up in the middle, and slows down at the end.
ease-in	Starts slowly and accelerates toward the end.
ease-out	Starts quickly and decelerates toward the end.
ease-in-out	Starts slowly, accelerates in the middle, and slows down again at the end.
linear	Moves at a constant speed from start to finish.
step-start	Jumps immediately to the end state at the start of the transition.
step-end	Remains in the start state and jumps to the end state at the very end of the transition.

#### Transition duration Transition duration defines how long the transition animation runs, measured in milliseconds. [^1]: Visible by default means that the element is visible when you load/reload the page. [^2]: The exception is is if you use the Go to page action and go to the same page you are currently on – in this case the element will keep its current visibility, since the page is not refreshed. Reference: [Action: Go to page](https://manual.bubble.io/core-resources/bubble-elements/element-properties/web-element-properties/container-properties/table-element/pages/-MTujrgFLiHe7MfwSBOF#go-to-page-...)
Reference: [Action: Refresh page](/core-resources/actions/navigation.md#refresh-the-page) [^3]: *Conditions* are appliead to elements to make them change their apperance or behavior based on a specific condition. Conditions are built using dynamic expressions.
Article: [Conditions](/help-guides/logic/conditions.md) Article: [Dynamic expressions](/help-guides/logic/dynamic-expressions.md) [^4]: An *action* is the part of a workflow that performs a specific task, such as making changes in the database, hiding/showing elements and sending API requests.\ \ Reference: [List of actions](/core-resources/actions.md)\ Article series: [Workflows](/help-guides/logic/workflows.md) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://manual.bubble.io/core-resources/bubble-elements/element-properties/web-element-properties/container-properties/table-element/table-row-column-repeating.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.