CSS:Adjust Input table column

Hi...

I would like to specify the width (in px or percentage) of each column separately in the input table. I'm pretty sure I can do it with CSS but I don't know the correct code to refer to each of the 10 columns.

I thought something like this would work but it does not...

#input_52-column_0 {

width: 10px !important;

}

Thank you - Jonathan

Hi AgilityAssoc.Canada,

Thanks for reaching out to Jotform Support. You can achieve your desired layout for your input table by injecting the following Custom CSS code:

.form-matrix-values:nth-child(2){

    width: 100px;

}

.form-matrix-values:nth-child(3){

    width: 100px;

}

.form-matrix-values:nth-child(4){

    width: 100px;

}

.form-matrix-values:nth-child(5){

    width: 100px;

}

.form-matrix-values:nth-child(6){

    width: 100px;

}

.form-matrix-values:nth-child(7){

    width: 100px;

}

.form-matrix-values:nth-child(8){

    width: 100px;

}

.form-matrix-values:nth-child(9){

    width: 100px;

}

.form-matrix-values:nth-child(10){

    width: 100px;

}

.form-matrix-values:nth-child(11){

    width: 100px;

}

Let me show you how to inject it to your form:

1. In Form Builder, click on Form Designer located at the top right.
2. Go to the Styles tab and paste the CSS code into the Inject Custom CSS section.

Take a look at the screenshot below to see my results:

Give it a try and reach out again if you have any other questions.

Thank you.
As a test, I have set all the fields at 50px and as you can see, the fields
are not the same width and definitely not 50px.

My CSS
.form-matrix-values:nth-child(2){
width: 50px;
}
.form-matrix-values:nth-child(3){
width: 50px;
}
.form-matrix-values:nth-child(4){
width: 50px;
}
.form-matrix-values:nth-child(5){
width: 50px;
}
.form-matrix-values:nth-child(6){
width: 50px;
}
.form-matrix-values:nth-child(7){
width: 500px;
}
.form-matrix-values:nth-child(8){
width: 50px;
}
.form-matrix-values:nth-child(9){
width: 50px;
}
.form-matrix-values:nth-child(10){
width: 50px;
}
.form-matrix-values:nth-child(11){
width: 50px;
}
*Jonathan*
*Jonathan Brown B.Sc., CET, CBET*
*Agility Association of Canada*
*Forms & Technical Support*
...

Hi AgilityAssoc.Canada,

Unfortunately, I couldn't see the screenshot you shared on my end. Can you try to send it again? We’ve got a guide here that’ll show you how to do that.

Once we hear back from you, we'll be able to move forward with a solution.

Here you go...

Or just look at the form...

https://form.jotform.com/232265343901956

Hi AgilityAssoc.Canada,

Each column has its own minimum width size depending on the field it contains or its label, that is why when you apply 50px some columns adjust. I suggest shortening the label of to achieve. Check out the screenshot below to see my result:

You can also adjust the font size of the labels of the column by adding this code below. See previous reply to guide you on how to inject CSS code into your form:

.form-matrix-headers.form-matrix-column-headers {

    font-size: 10px;

}

Note, you can adjust the size by changing the value of 10px.

You can tell us more on how you want to style your column so we can help you.

Let us know if you need any more help.