How to change Input Table's column width

  • DiazJdiaz
    Asked on March 17, 2023 at 5:51 PM


  • Hitomie_R
    Replied on March 18, 2023 at 3:12 AM

    Hi DiazJdiaz,

    I saw your post and would love to help. I can see that you want to change the width of your column. Follow the steps down below on how to change the width.

    1.There is a gear icon beside the table that you put in the editing page, click that and it will lead you to the properties

    1679123412 641563d4166a1  Screenshot 10

    2.Once you click it, it would lead you to the properties then kindly click "Options", in here you will set the table width.

    1679123500 6415642cb67b5  Screenshot 21

    I hope this helps and if you have any questions feel free to ask!

    Have a great day and stay safe!

  • Billy JotForm Support
    Replied on March 19, 2023 at 2:14 AM

    Hello Jo,

    Thank you for reaching out to Jotform Support. I assume you're referring to the Input Table's column on this form.

    1679206130 6416a6f2f2b97  Screenshot 10

    If so, the only way to change the column width is by injecting CSS code into the form. Let me show you how:

    1. Open the form in Form Builder
    2. Click on the roller-paint icon (Form Designer) located in the upper right corner
    3. Click on the Styles tab
    4. In the Inject Custom CSS section, insert/paste the code below and click on Save
    /* Sets the width of the first column */
    .form-matrix-th {
    width: 400px !important;
    }
    /* Sets the width of the second column */
    .form-matrix-column_0 {
    width: 100px !important;
    }
    /* Sets the width of the third column */
    .form-matrix-column_1 {
    width: 120px !important;
    }

    Result:

    1679206365 6416a7dd17133  Screenshot 21

    Please check my sample form here. Feel free to set the column's widget according to your preference by changing the pixel (px) values. (e.g. width: 80px !important;)

    Reach out again if you need any other help.