Modifier largeurs tableau avec le CSS

Bonjour,

Je souhaite modifier mon CSS pour que 4 de mes tableaux ai des colonnes de largeurs spécifiques.

Tableau avant :

Tableau après :

Mon CSS est le suivant :

/* Deuxième colonne : champs input */

td:nth-child(2) {

 width: 50px !important;

 max-width: 50px !important;

}

/* Troisième colonne (et plus si besoin) */

td:nth-child(3) {

 width: 410px !important;

 max-width: 410px !important;

}

Mon problème est que cela modifie tous mes tableaux et je n'arrive pas à cibler que mes 4 tableaux dont les identifiants sont les suivant :

Tableau 1 : #input_54_0_0, #input_54_0_1, #input_54_1_0, #input_54_1_1, #input_54_2_0, #input_54_2_1, #input_54_3_0, #input_54_3_1, #input_54_4_0, #input_54_4_1

Tableau 2 : #input_72_0_0, #input_72_0_1, #input_72_1_0, #input_72_1_1, #input_72_2_0, #input_72_2_1, #input_72_3_0, #input_72_3_1

Tableau 3 : #input_73_0_0, #input_73_0_1, #input_73_1_0, #input_73_1_1, #input_73_2_0, #input_73_2_1, #input_73_3_0, #input_73_3_1, #input_73_4_0, #input_73_4_1, #input_73_5_0, #input_73_5_1, #input_73_6_0, #input_73_6_1

Tableau 4 : #input_74_0_0, #input_74_0_1, #input_74_1_0, #input_74_1_1, #input_74_2_0, #input_74_2_1, #input_74_3_0, #input_74_3_1, #input_74_4_0, #input_74_4_1, #input_74_5_0, #input_74_5_1, #input_74_6_0, #input_74_6_1, #input_74_7_0, #input_74_7_1, #input_74_8_0, #input_74_8_1, #input_74_9_0, #input_74_9_1, #input_74_10_0, #input_74_10_1, #input_74_11_0, #input_74_11_1, #input_74_12_0, #input_74_12_1, #input_74_13_0, #input_74_13_1, #input_74_14_0, #input_74_14_1, #input_74_15_0, #input_74_15_1

Pouvez-vous m'aider ?

Hi Romane,

Thanks for reaching out to Jotform Support. Our French Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in French, let us know and we can have them do that. But, it might take a while until they're available again.

Now, coming back to your question. You can change the width of the columns in your input tables. Let me help you do that:

1. Copy the code below. You can adjust the percentage to achieve whatever outcome you want.

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

  width : 25% !important;

}

2. Then, 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.

You can also check out our guide about How to Inject Custom CSS Codes for more information.

This will change the width of the columns in all your input tables within the form.

Give it a try and let us know how it goes.

Hi Dayron,

It’s not my question. I need to change the column width, but only for 4 tables.

My CSS is changing all my tables.

Actual CSS code :

td:nth-child(2) {

 width: 50px !important;

 max-width: 50px !important;

}

td:nth-child(3) {

 width: 410px !important;

 max-width: 410px !important;

}

Hi Romane,

Thanks for clarifying. In this case, you can copy the code below and paste it into the Inject CSS Code box, as I explained in my previous reply.

#cid_7 td:nth-child(2),

#cid_8 td:nth-child(2),

#cid_10 td:nth-child(2),

#cid_12 td:nth-child(2) {

 width: 50px !important;

 max-width: 50px !important;

}

Note that you will need to change the respective ID in the code above to the table you want to modify.

1. Select the Input Table and click on the Gear icon.
2. Then click on the Advanced tab.
3. Scroll down, and under the Field Details, you will find the Field ID.

Give it a try and let us know if you need any help.

Hi Dayron,

I’m doing this, but it’s not working :

#cid_54 td:nth-child(2),

#cid_72 td:nth-child(2),

#cid_73 td:nth-child(2),

#cid_74 td:nth-child(2) {

 width: 50px !important;

 max-width: 50px !important;

}

#cid_54 td:nth-child(3),

#cid_72 td:nth-child(3),

#cid_73 td:nth-child(3),

#cid_74 td:nth-child(3) {

 width: 410px !important;

 max-width: 410px !important;

}

Hi Romane,

Are you referring to these tables? Check out the image below:

Do you still want to adjust the column widths of these tables? If so, you can adjust the values of the CSS code below to achieve it. Here is the code:

#cid_54 td:nth-child(2),

#cid_72 td:nth-child(2),

#cid_73 td:nth-child(2),

#cid_74 td:nth-child(2) {

 width: 200px !important;

 max-width: 200px !important;

}



#cid_54 td:nth-child(3),

#cid_72 td:nth-child(3),

#cid_73 td:nth-child(3),

#cid_74 td:nth-child(3) {

 width: 200px !important;

 max-width: 200px !important;

}

I suggest you remove the other CSS codes you added on your form, since you cannot resize each field individually. You can retain the code above and modify it based on your preference. Here's what it'll look like when you use the CSS code above on your form:

Give it a try and let us know how it goes.

It’s not working.

My bad, the design changes when filling out the form but not in the form builder section. The code works.