Column Width CSS Effects on Table

icochrane
Asked on October 05, 2020 at 10:02 AM

I have managed to set the column width but the setting applies to all table. So the first table is OK but the second table is not. How do I set the column widths in a specific table ?
Trying to sort out the table widths has taken far to long for what is a very fundamental requirement. Easy to use apart from this one fundamental issue.

This is a re-post of a comment on How to Inject Custom CSS Codes
Amjad_A
Answered on October 05, 2020 at 01:25 PM

Hi there,
Thanks for reaching out to us,
Could you please provide us the form ID or URL in which you want to add CSS to a specific column, so that, we will be able to customize the table and provide you CSS in order to change the width of column?
Looking forward to your response.
icochrane
Answered on October 06, 2020 at 05:46 AM

Appologies I may not be properly understanding your question. The form is available at
https://form.jotform.com/202782222524045
The Unique name of the second table is - questionsTo9 - I am not sure how to refer to the table in the CSS
I have used the following CSS code which works on the first table but as the second table has fewer columns the % split does not work.
.form-matrix-headers.form-matrix-column-headers.form-matrix-column_0 {
  width : 10%;
}
.form-matrix-headers.form-matrix-column-headers.form-matrix-column_1 {
  width : 10%;
}
.form-matrix-headers.form-matrix-column-headers.form-matrix-column_2 {
  width : 5%;
}
.form-matrix-headers.form-matrix-column-headers.form-matrix-column_3 {
  width : 30%;
}
.form-matrix-headers.form-matrix-row-headers {
  width : 40%;
}
If you could supply the CSS code to allow me to allocate column widths to a specific table that would be great.
regards,

Iain
Richie

Jotform Support

Answered on October 06, 2020 at 08:41 AM

You may try adding this custom CSS
#cid_9 .form-matrix-column_0 {
width : 10% !important;
}
#cid_9 .form-matrix-column_1 {
width:40% !important;
}

Please give it a try and let us know how it goes.
icochrane
Answered on October 07, 2020 at 08:01 AM

Many thanks , that seems to work perfectly. For future reference , where would I find the reference to #cid_9 to allow me to change the settings on a different table. E.g. how do I find the reference to the other table in the form ?
Richie

Jotform Support

Answered on October 07, 2020 at 09:28 AM

You would have to use the Inspect element or Inspect feature in your web browser to get the field ID.

Hope this information helps.
If you have further questions, let us know.