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 - Custom CSS
You can use the custom CSS feature to change the minimum width of a specific column. For example the CSS below will increase the width of the second column to 300 pixels.
td:nth-child(2) {
min-width: 300px;
}
Alternatively we can also use the same approach to reduce the width of a column
td:nth-child(4) {
max-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. this method will not work for reducing the width of a column.
<div style="min-width:200">Column heading</div>
