Input Data Table: Adjusting Column Widths for Different Columns

On the screenshot, I want to make the QUANTITY column less wide and the Breed column wider. If this cannot be done, should I use a spreadsheet?

Hi CCADT,

Thanks for reaching out to Jotform Support. I'm an AI assistant here to assist you.

Regarding your question about adjusting column widths in the input data table, Jotform Tables currently does not support manually adjusting the width of individual columns such as making the QUANTITY column less wide and the Breed column wider.

If you need more control over column widths and layout, using a spreadsheet application might be a better option for that specific purpose.

Let us know if you have any other questions.

Hi CCADT,

We can use Custom CSS code to adjust the a particular column's width, in the input table. Let me walk you through it:

1. First, copy this code:

.form-matrix-table tr td:nth-child(3) {

width: 1200px !important;

}

.form-matrix-table tr td:nth-child(2) {

width: 120px !important;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Check out my result:

Give it a try and let us know if there's anything else we can help you with.

Thank you Lorenz. I made some additional width adjustments on the first table.

Now, I need to do so for the 2nd table (Livestock). It needs to be separate from the first table adjustments since I added a column. If I use the same CSS, won't it change the first table also? Please advise.

Thank you!

Naomi Tobias

Hi Naomi,

You need to remove the following CSS code first from line 52 to 55:

.form-line {

    .form-matrix-table tr td : nth-child(3) {

    width: 1200px !important;

}

Then, by following the same steps shared by Lorenz above, you can inject the following CSS in your form:

li#id_188 .form-matrix-headers.form-matrix-column-headers.form-matrix-column_1, li#id_188 .form-matrix-table td:nth-child(3) {

    width: 9% !important;

}

Here is the result in a cloned form:

Reach out again if you need any other help.