Data grids are great when you need a repeating table with a dynamic number of rows. Team Forms will automatically change the width of the columns to best fit the content, however, sometimes it can be useful to have more control.
Option 1 - Custon CSS
You can use the custom CSS feature to change the minimum width of a specific column. For example the CSS below will change the width of the second column to 300 pixels.
td:nth-child(2) {
min-width: 300px;
}
Option 1 - Style Attributes
This can be achieved by adding custom CSS to any Team Forms component. This allows you to control every aspect of that component's look and feel from simple changes like changing the font colour to changing the width. CSS can be a very complex topic which we won't cover here, however, we will look at the simple example of changing the width of a component.
Navigate to the Layout tab of your component settings
Add a style attribute and for the value add the CSS below
min-width: 100px;
Option 2 - Insert HTML in label
For some component like the drop-down menu the style tab will not work. In these situations you can insert HTML into the label property to force the width of the column to increase. In the example below we increase the width the following html.
<div style="min-width:200">Column heading</div>
