Make the input table full width

  • healthdba
    Asked on September 21, 2020 at 11:50 AM

    On this form:  https://www.jotform.com/build/202643991357058    the input table only stretches to half the size of the page, and the columns are too narrow because of this.

    Can I force it to take up the entire width of the page rather than just half?



    Also, is it possible to change widths on the table columns - to have the first column half the width of the second column, for instance?

    In other words, can CSS help me to adjust the column widths individually?

  • Bojan Support Team Lead
    Replied on September 21, 2020 at 4:05 PM

    Greetings.

    To resolve your problem, please try to add the following CSS to your form:

    .form-matrix-value-tr td:nth-child(2){
     width: 75px;
    }
    .form-matrix-table {
     max-width: 100%;
     width: 100% !important;
    }

    You can click here to see how to inject it.

    Let us know if this resolved your problem.

  • healthdba
    Replied on September 21, 2020 at 5:03 PM

    Ah, very nice.  yes, this will solve my problem for sure.

    For another project in the works, though, would I be able to adjust column widths in different tables in different ways?  Essentially applying a CSS style one table at a time?  

    Could I replace '.form-matrix-table' with the unique name of the table, somehow?  (In this case, "typeA" is the unique name of the field, but I'm not sure how to use that properly)   

  • healthdba
    Replied on September 21, 2020 at 5:23 PM

    Apologies, I found it through trial and error (and finding a very helpful video)

    #cid_90 > table > tbody td:nth-child(2) {

        width : 200px;


    }


    You have been extremely helpful!

  • Bojan Support Team Lead
    Replied on September 21, 2020 at 6:25 PM

    We're happy to hear you have resolved your problem.

    If there is anything else we can do for you, feel free to let us know.