What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to increase the size of columns in a table ?

    Asked by aarboleda on February 27, 2016 at 07:27 AM

    Hello

     

    I created the following form

    https://form.jotform.com/60565637877976

     

    I need to at least double the with of the first and last columns on the table at the bottom of the form.

    How can I do that ?

     

    The form is not embeded into a webpage but rather a link to a new window.

     

     

    Page URL:
    https://form.jotform.com/60565637877976

    size table increase width increase columns matrix table
  • Profile Image
    JotForm Support

    Answered by Jan on February 27, 2016 at 08:13 AM

    You can use the CSS code below in order to adjust the width of the columns.

    /* 1st column */
    .form-matrix-row-headers +.form-matrix-values .form-textbox {
    width: 200px;
    border-style: solid;
    border-width: 1px;
    }

    /* 2nd Column */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 100px;
    border-style: solid;
    border-width: 1px;
    }

    /* 3rd Column */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 200px;
    border-style: solid;
    border-width: 1px;
    }

    Here's a guide on how to inject custom CSS on the form. Hope that helps. Let us know if you need further assistance. Thank you.

  • Profile Image

    Answered by aarboleda on February 27, 2016 at 10:41 AM

    Thanks for your help . I did that and columns are wider now. But although your code gives 200px for the first and third column and only 100px to the second column , the form does not show accordingly. 

    It shows more like First Column 100px , Second Column 100px and Third Column 200px

    Any ideas

     

     

  • Profile Image
    JotForm Support

    Answered by Jan on February 27, 2016 at 12:35 PM

    Sorry, the code above is missing "/" in the first column, currently it is * 1st Column */ . I just edited it the post and add "/". Please use this CSS code for the first column:

    /* 1st column */
    .form-matrix-row-headers +.form-matrix-values .form-textbox {
    width: 200px;
    border-style: solid;
    border-width: 1px;
    } 

    Let us know if there's still an issue. Thank you.

  • Profile Image

    Answered by aarboleda on February 28, 2016 at 04:46 PM

    Working fine now. thanks

     

     

  • Profile Image
    JotForm Support

    Answered by Nik_C on February 28, 2016 at 05:04 PM

    Hello,

    On behalf of my colleague Jan you're welcome.

    Do not hesitate to contact us in future.

    Best regards.