CSS code for a table with different column widths

  • TTLNN2018
    Asked on September 24, 2018 at 7:19 AM

    I have tables I would like to have different widths for the answers - like this table, the first column to be twice the width of the second and third.  


    Can you give me CSS code for this please? 



    Jotform Thread 1589202 Screenshot
  • liyam
    Replied on September 24, 2018 at 9:32 AM

    Hello,

    The sizes of the columns of a table may vary, depending on the specific field (as each has its own ID), and depending on the specific column. With this, I would suggest to provide us which form and which field you would like to make a sample of so we can provide a code.

    We shall look forward to your response.

    Thanks.

  • TTLNN2018
    Replied on September 25, 2018 at 5:34 AM

    Hi there, the form is here:  https://form.jotformeu.com/81821441206347

    Not expecting you to fix all of these, but if you could let me know the code I need for each, I'd hugely appreciate it.  The changes are columns that need different column widths as well as some checklist entries I would like in bold type. 


    TABLES THAT NEED COLUMN WIDTH CHANGES: 

    pleaseList:  All columns need to be two rows deep.  First column can be narrower than second and third, but second and third do need to have some room to type a longer narrative.

    medication19: All columns two rows deep and equal width for each. 

    yourFamily: column to fill rest of page width

    input49: column to fill rest of page width 

    yourDigestion48:  Third column needs to have room to enter text 

    input50: column needs to fill rest of page width

    input52: column needs to fill rest of page width

    input54: column needs to fill rest of page width 

    your Energy: both columns need to fill rest of page width

    eatingHabits:  column needs to fill rest of page width 

    input62:  Second column needs to have room to enter text



    Checklists that need certain entries in a different colour or in Bold 

    head: Headaches to be in bold

    mouth:  Difficulty swallowing 

    eyes:  blurred vision

    nose:  frequent nose bleeds

    Skin – changes in moles or lesions (note s in lesions is missing)

    Mood – suicidal

    Chest – chest discomfort/pain, short of breath, persistent cough


  • Jed_C
    Replied on September 25, 2018 at 9:13 AM

    Below are the CSS code for the Matrix Table. Just change the 00px to your preferred width size.

    pleaseList:  All columns need to be two rows deep.  First column can be narrower than second and third, but second and third do need to have some room to type a longer narrative.

    Health Issue

    input#input_16_0_0 {

        width: 00px !important;

    }

    input#input_16_1_0 {

        width: 00px !important;

    }

    input#input_16_2_0 {

        width: 00px !important;

    }

    input#input_16_3_0 {

        width: 00px !important;

    }

    input#input_16_4_0 {

        width: 00px !important;

    }

    input#input_16_5_0 {

        width: 00px !important;

    }

    input#input_16_6_0 {

        width: 00px !important;

    }

    input#input_16_7_0 {

        width: 00px !important;

    }

    input#input_16_8_0 {

        width: 00px !important;

    }

     

    Management so far

    input#input_16_0_1 {

        width: 00px !important;

    }

    input#input_16_1_1 {

        width: 00px !important;

    }

    input#input_16_2_1 {

        width: 00px !important;

    }

    input#input_16_3_1 {

        width: 00px !important;

    }

    input#input_16_4_1 {

        width: 00px !important;

    }

    input#input_16_5_1 {

        width: 00px !important;

    }

    input#input_16_6_1 {

        width: 00px !important;

    }

    input#input_16_7_1 {

        width: 00px !important;

    }

    input#input_16_8_1 {

        width: 00px !important;

    }

     

    How long has this been an issue?

    input#input_16_0_2 {

        width: 00px !important;

    }

    input#input_16_1_2 {

        width: 00px !important;

    }

    input#input_16_2_2 {

        width: 00px !important;

    }

    input#input_16_3_2 {

        width: 00px !important;

    }

    input#input_16_4_2 {

        width: 00px !important;

    }

    input#input_16_5_2 {

        width: 00px !important;

    }

    input#input_16_6_2 {

        width: 00px !important;

    }

    input#input_16_7_2 {

        width: 00px !important;

    }

    input#input_16_8_2 {

        width: 00px !important;

    }

     

    medication19: All columns two rows deep and equal width for each

     

    #cid_19 > table {

        width: 00px !important;

    }

    yourFamily: column to fill rest of page width.

     #cid_47 > table {

        width: 00px !important;

    }

    input49: column to fill rest of page width 

     #cid_49 > table {

        width: 00px !important;

    }

    yourDigestion48:  Third column needs to have room to enter text 

     input#input_48_0_2 {

        width: 00px;

    }

    input#input_48_1_2 {

        width: 00px;

    }

    input#input_48_2_2 {

        width: 00px;

    }

    input#input_48_3_2 {

        width: 00px;

    }

    input#input_48_4_2 {

        width: 00px;

    }

    input#input_48_5_2 {

        width: 00px;

    }

    input#input_48_6_2 {

        width: 00px;

    }

    input#input_48_7_2 {

        width: 00px;

    }

    input#input_48_8_2 {

        width: 00px;

    }

    input#input_48_9_2 {

        width: 00px;

    }

    input#input_48_10_2 {

        width: 00px;

    }

    input#input_48_11_2 {

        width: 00px;

    }

    input#input_48_12_2 {

        width: 00px;

    }

    input#input_48_13_2 {

        width: 00px;

    }

    input#input_48_14_2 {

        width: 00px;

    }

    input#input_48_15_2 {

        width: 00px;

    }

    input50: column needs to fill rest of page width

     #cid_50 > table {

        width: 00px !important;

    }

    input52: column needs to fill rest of page width

     #cid_52 > table {

        width: 00px !important;

    }

    input54: column needs to fill rest of page width 

     #cid_54 > table {

        width: 00px !important;

    }

    your Energy: both columns need to fill rest of page width

     #cid_53 > table {

        width: 00px !important;

    }

    eatingHabits:  column needs to fill rest of page width 

      #cid_61 > table {

        width: 00px !important;

    }

    input62:  Second column needs to have room to enter text

     

     #cid_62 > table > tbody > tr:nth-child(1) > th.form-matrix-column-headers.form-matrix-column_1{

        width: 00px !important;

    }

    Please try that one first and let us know if you have any questions. Looking forward for your response. 

  • TTLNN2018
    Replied on October 3, 2018 at 6:12 AM

    Hi there


    Thank you for this code, but sorry it is not doing what I need it to do.  This changes the width of the columns but does not make them two lines deep.  


  • Kevin Support Team Lead
    Replied on October 3, 2018 at 9:18 AM

    Please note that with the CSS code my colleague provided you may play with the "width" value in order to get the desired result. If you're unable to get it to work, please kindly let us know what are you referring with "two rows deep", the values in the CSS codes are set up in pixels and percentage so you may let us know the size in these values (px or %). 

    Thanks. 

  • TTLNN2018
    Replied on October 3, 2018 at 6:48 PM

    I cannot get these suggested code changes to work.  Can you give any further help here?  

    Thank you 

  • TTLNN2018
    Replied on October 3, 2018 at 6:55 PM

    Thanks Kevin - so currently it looks something like this.... 1538607223Screenshot 2018 10 03 23 Screenshot 10

    I am trying to achieve more like this.... more space vertically and middle column the widest of the three. 


    1538607263Screenshot 2018 10 03 23 Screenshot 21


  • Kevin Support Team Lead
    Replied on October 3, 2018 at 8:39 PM

    Unfortunately, the field type used does not allow that and such customization cannot be done with CSS codes, a text area would be needed to achieve what you want, but this field type is not supported in the input table. 

    We may request such change to our second level, but we cannot ensure this change will be implemented nor provide an ETA. 

    Let us know if you would like this to be escalated. 


  • TTLNN2018
    Replied on October 4, 2018 at 5:48 AM

    Thanks for the reply Kevin, that helps. At least I know it's not possible so can try a workaround :)  Much appreciated 

  • Kevin Support Team Lead
    Replied on October 4, 2018 at 8:26 AM

    Alternatively, you may use the Configurable List widget which allows text area fields, here is the link: https://widgets.jotform.com/widget/configurable_list 

    This guide will help you adding it to your form: https://www.jotform.com/help/252-How-to-Add-a-Widget-to-Your-Form 

    And this guide will help you configuring the widget: https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget 

    I hope this helps.