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 can i create a table and resize each column with separate width size

    Asked by Prasanth on July 07, 2014 at 09:06 PM

    Hi all,

    I am using Matrix option to create a table ( 6 rows x 3 columns) that could contains texts and numbers.

    I want to resize each columns with separate width size

    Can someone guide me do that

    Screenshot
    size table create and
  • Profile Image

    Answered by Jim_Rank on July 08, 2014 at 01:46 AM

    Hi Prasanth,

    To resize the the 2nd and 3rd column of a matrix table see the following steps-

    1. First inspect the 'Matrix table' and grab the div name. You may use firebug or any other tools to do it. See the following screenshot-

    2. To Narrow the 2nd column inject the following CSS codes-

    #cid_14 td:nth-child(2) input[type="text"] {
        width: 50px !important;
    }

    To widen the 3rd column (Course name) inject the following CSS code-

    #cid_14 td:nth-child(3) input[type="text"] {
        width: 300px !important;
    }

    Check the demo form in this link.

    Please check the following guide to know how to inject the custom CSS-

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    If you need any further assistance, please get back to us. Cheers!