I need help formatting two tables in my form.

  • aharantschuk
    Asked on March 12, 2018 at 6:25 PM

    Good evening.  I was wondering if I could get some help formatting tables in my 2018 Membership Renewal Form.  


    https://www.jotform.com/build/80664735145157


    I just want to to look like the rest of the form.  I have spent hours trying to make this work.  If you have a service that would charge me, I am ok with that.  I would just need to know cost and turnaround time. We are a very small non profit with minimal funds. 


    Thank you!

    Alicia 

  • John_Benson
    Replied on March 12, 2018 at 8:28 PM

    Hello Alicia,

    We do not charge our JotForm users here in the Support Forum for assistance or help. Just a question, are you referring to the 2 Table in the screenshot:

    1520900753Table 001 Screenshot 10

    If yes, do you want us to adjust the width of the first table and match it with the 2nd table? or you just want us to change the color of the two Table and blend into your form?

    We'll wait for your reply. Thank you.

  • alicia
    Replied on March 12, 2018 at 10:23 PM

    Yes those are the tables.  


    I would like it to be formatted like the form template and for the member to see what they are entering.  The tables can be as wide as possible while still working on mobile devises.  Does that make sense. 


    THank you


  • BJoanna
    Replied on March 13, 2018 at 3:37 AM

    Here is my demo form: https://form.jotform.com/80711780517961 

    I need help formatting two tables in my form.  Image 10

    I need help formatting two tables in my form.  Image 21

    Please test it to see if it meet what you are looking for. You can also clone it

    I added the following CSS code to my form to make the text of the Input Table fields visible and to adjust the width for mobile devices: 

    .form-matrix-column-headers {

        background : transparent!important;

    }

    .form-matrix-row-headers {

        background : transparent;

    }

    .form-matrix-values {

        background : transparent;

    }

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    .form-matrix-row-headers {

        width: 50px;

    }}

    How to Inject Custom CSS Codes

    I also increased the width of the form to 650px. 

    The Importance of Form Widths

    And I changed the table and column width of your Input Table fields. The Shrink option was also turned On form Input Table field. I changed it to OFF for both fields. 

    Hope this will help. Let us know if you need further assistance.

  • aharantschuk
    Replied on March 13, 2018 at 7:09 AM

    This is great.  

    Thank you so very much!!!