Adjust input table column size

  • Profile Image
    darcie.vaughan
    Asked on May 13, 2022 at 07:34 PM

    Hi!

    I would like to be able to resize my columns individually - meaning, I would like them to be different widths. Can you provide me with the CSS for this? The form I am working on is this one which has different table so I need the CSS to be 'generic' where I can adjust the width as needed. Thanks!

    https://form.jotform.com/221258459003048

  • Profile Image
    Sigit
    Answered on May 13, 2022 at 09:32 PM

    Hello Darcie,


    Thank you for contacting Jotform Support. It is possible to adjust the width of all table columns, this CSS code will apply to all tables on the form:

    tr th:first-child{
    width: 20%;
    min-width: 20px;
    }
    tr th:nth-child(2){
    width: 10%; min-width: 10px;
    }
    tr th:nth-child(3){
    width: 10 min-width: 10px;
    }
    tr th:nth-child(4){
    width: 10%; min-width: 10px;
    }
    tr th:nth-child(5){
    width: 50%; min-width: 50px;
    }

    To target a specific table, add the #cid_XX > table in front.

    If you need further assistance, please let us know. 


  • Profile Image
    Sigit
    Answered on May 13, 2022 at 09:43 PM

    Hello Darcie,


    In regard to the workaround that we discussed earlier today, here's an example when the CSS code applied on the 2. Potential Parties table, as shown in the screencast below:

    #cid_11 > table > tbody > tr th:first-child{
    width: 20%;
    min-width: 20px;
    }


    1652492563_627f0913af532_

    If you need further assistance, please let us know. 


  • Profile Image
    darcie.vaughan
    Answered on May 14, 2022 at 01:25 PM

    so to make the address column wider, would that be 'fourth-child'?

  • Profile Image
    Sigit
    Answered on May 14, 2022 at 02:24 PM

    Hello Darcie,


    Thank you for getting back to us. Kindly allow me some time to check and will get back to you as soon as possible.

    Thank you for your patience and understanding.

  • Profile Image
    Sigit
    Answered on May 14, 2022 at 03:13 PM

    Hello Darcie,


    Thank you for your patience. To make the Potential Parties - Input Table - address column wider, please inject the following CSS code as shown in the screencast below:

    1652555543_627fff1786c72_

    CSS code:

    /*header*/
    #id_11 .form-matrix-th {
     width: 100px !important;
    }


    /*Full Name*/
    #id_11 .form-matrix-column_0 {
     width: 180px !important;
    }


    /*Phone*/
    #id_11 .form-matrix-column_1 {
     width: 180px !important;
    }


    /*Address*/
    #id_11 .form-matrix-column_2 {
     width: 280px !important;
    }


    If you need further assistance, please let us know.