Change column width of a single Input Table

  • epr123
    Asked on September 30, 2017 at 9:32 PM

    I have several input tables on a form. I need to adjust column width individually on each one. Is there a way to do this instead of adjusting all columns on the form globally? I have found the CSS code to inject, but the only place I can find to inject the code is through the Form Designer which applies the changes globally.

    I want the fields on the Target Colleges Input Table to be similar to the width of the Target Colleges Configurable List above it, but you can see that the student info fields become much too wide due to the global setting.

    Jotform Thread 1262091 Screenshot
  • Elton Support Team Lead
    Replied on September 30, 2017 at 10:50 PM

    Add the ID selector before the class selector of the input table field to target only the specific field.

    Example, with your existing code.

    #id_3 table.form-matrix-table input{
    width:150px !important;
    }

    You can get the ID number through inspect element or within the field settings in the form builder.

    Example:

    Change column width of a single Input Table Image 1 Screenshot 20

    Just let us know if you need further assistance about this.

  • epr123
    Replied on October 1, 2017 at 12:52 AM

    Awesome, that worked! I updated my other tables as well.