Input Table: How to add a row with text only at the bottom of the table?

  • carinassilveira
    Asked on September 10, 2017 at 7:32 PM
    Ainda assim não tenho como criar uma última coluna apenas com texto, vejam
    abaixo. Preciso ter mais uma coluna aí no final parecida com a primeira
    coluna.
  • Kevin Support Team Lead
    Replied on September 10, 2017 at 7:33 PM

    It's not possible to add text at the bottom of the Input Table, but there is a workaround that you may follow, here are the steps: 

    1. Add a text element right below the Input Table on your form. 

    Input Table: How to add a row with text only at the bottom of the table?  Image 1 Screenshot 40

    2. If you want to have some headers, you could add a table like this on the source code of the text element: 

    <table class="form-matrix-table" summary="" cellspacing="0" cellpadding="4" data-component="matrix">

    <tbody>

    <tr>

    <th class="form-matrix-column-headers">Very Satisfaced</th>

    <th class="form-matrix-column-headers">Satisfaced</th>

    <th class="form-matrix-column-headers">Somewhat Satisfaced</th>

    <th class="form-matrix-column-headers">Not Satisfaced</th>

    </tr>

    </tbody>

    </table>

    Input Table: How to add a row with text only at the bottom of the table?  Image 2 Screenshot 51

    You may add a new header by adding a new "th" tag, please use the same class like the example above so the headers have the same layout than the Input Table. 

    Also, you may just add the text, without any table. 

    3. Inject the following CSS code to your form that will help you displaying the text element right below the Input Table, do note that the "margin-top" and "left" values may change according to the position of the fields on your form, you may change them if you want:

    #fieldID {

        padding: 0px;

        margin: 0px;

        width: auto !important;

        position: absolute;

        margin-top: -33px;

        left: 147px;

        z-index: 100;

    }

    The "fieldID" can be found if you open your form in a new tab and right click on the text element, copy the ID attribute value of the <li> element: 

    Input Table: How to add a row with text only at the bottom of the table?  Image 3 Screenshot 62

    Here's an example about how this would work: https://form.jotformpro.com/70767676014967 

     

    I hope this helps.