CSS: How to adjust the width of an input table

  • donna940
    Asked on March 20, 2025 at 6:03 PM

    Hello, I have several Input tables in my form that are similar to the one below. I would like to make the first column with the question larger than the other columns and have the other columns all the same width. How can I do this?

    This table will also need to be shown in a PDF not solely as a form. Will the formatting I set in the form carry over to a PDF. Also, are there standard table widths I can use reference. I am not sure what I should select that would work best on a 8 1/2 x 11 sheet of paper.

    As a note, I need guidance on using the CSS editor if that is a requirement.

    Setting column widths for individual columns in Input Tables Image 1 Screenshot 20 Screenshot 10

    Jotform Thread 25440091 Screenshot
    Page URL: https://www.jotform.com/250703778856065
  • Lara JotForm Support
    Replied on March 21, 2025 at 3:46 AM

    Hi Donna, 

    Thanks for reaching out to Jotform support. You can easily resize the columns from your input table by Injecting CSS Codes into your form. Let me walk you through it:

    1. First, copy this code:

    /*Adjusts the width of an input table - 25440091*/
    
.form-matrix-headers.form-matrix-row-headers {
    
    min-width : 200px !important;
    
}
    
.form-matrix-values {
    
    min-width : 20px !important;
    
/*Code ends here*/

    2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

    3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

    CSS: How to adjust the width of an input table Image 1 Screenshot 20 As for your other question, I've moved that to a new thread. You can check that out here.

    Give it a try and let us know how it goes.

  • donna940
    Replied on March 21, 2025 at 7:19 AM

    Thank you very much. Your solution works perfectly.