How Can I adjust column width with CSS on Configurable Lists?

I have a simple row for text inputs, but not all text input cells require the same column width.  Not having the ability to adjust the column widths means I'm limited to the number of columns I can have on my page form.

I don't want to adjust the page form width simply to accommodate the list width and thought there must be an easy CSS solution to adjust the column widths (as required) within Configurable list.

Great site - BTW - very impressed with JotForm.

May we know what specific configurable list do you want to change the column width?

The configurable list widget is divided into table with columns and rows.

Here is a sample chart to properly explain the columns in the Configurable list widget.

To adjust the width, you can insert this sample custom css code in the widget.

td.col1 {

width:100px;

}

Hope this information helps.

Thank you.

Thanks for getting back to me so quickly!
Here’s the table I’m working on:
I would like to set custom widths for each column as you can see there’s a lot of wasted space (and ideally I’d like to add a few more columns).
I tried your CSS code as below - but nothing changed to any of the widths. I must be doing something wrong!
...

Unfortunately, I cannot view the table. You can post a screenshot by following this guide:How-to-include-screenshot-image-in-the-support-forum

Thank you.

Ah - okay.  Sorry.

Here's the table I'm working on.

I would like to set custom widths for each column as you can see there’s a lot of wasted space (and ideally I’d like to add a few more columns).
I tried your CSS code as below - but nothing changed to any of the widths. I must be doing something wrong!

Can you please try this updated CSS code.

td.col1>textarea{
width:80px;
}

Sample screenshot:

Note that you still have to place the CSS code inside the widget's custom CSS.

Please give it a try and let us know how it goes.

Thank you.

That worked perfectly and thank you!

How do I make the same adjustments to the remaining columns (ie. 2, 3, 4 & 5 etc.)

We can use similar CSS.

Here is an example:

td.col1>textarea{
width:80px;
}
td.col2>textarea{
width:80px;
}
td.col3>textarea{
width:80px;
}
td.col4>textarea{
width:80px;
}
td.col5>textarea{
width:80px;
}

Thank you.

This is perfect!  Thank you.

Okay, one last question (promise).

I've entered additional columns but the spacing between each column changes from column 6 onward.  I would like to keep the same column separation as from one to five so everything fits properly on the form width.

I have checked your form and it seems the column spacing is corrected.

Can you please let us know if the issue still remains?

Thank you.