Column Width CSS Effects on Table

  • Profile Image
    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

  • Profile Image
    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.

  • Profile Image
    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




  • Profile Image
    Richie_P
    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.

  • Profile Image
    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 ?


  • Profile Image
    Richie_P
    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.

    1602077153_5f7dc1e1b85fa_3.png


    1602077250_5f7dc242bc3ef_3.png

    Hope this information helps.

    If you have further questions, let us know.