How to align and split boxes along with calculations

Hello,

My name is Nick and I have a quick question about a form I created. It is a form that I found online a while back and tweaked to use as an expense form for my school district. Here is an example of the form: https://form.jotformpro.com/NickCombs/thales-academy-system-expensereport  As you may notice, above the area to fill in dates, it is showing expense 1 (this was not present in the past) and the alignment of the text and cells are not consistent. Is there any way to change these issues?

 

I am also adding a screenshot of a pdf submission. Maybe you can tell me how to split the expense nine boxes and total calculations boxes.

 

Warm regards,

 

Nick

The problem is that each box is a field, therefor the alignment in the form is not consistent. What I would suggest you is to use a matrix field type.

I have taken the time to recreate your form using the Input Table(Matrix) field, and the Configurable List widget for the dates. Here is how I have performed the calculations on each calculation widget from matrix columns: 

So, to accomplish this layout:

I injected the following CSS code in the form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

#cid_153{

    margin-left: -70px;

}

#id_152 table.form-matrix-table input{

width: 80px !important;

}

#label_153{

    visibility: hidden;

}

And the following CSS code inside the Configurable List widget:

#customFieldFrame_153{

height: 323px;

}

th {

    background: #ddd !important;

    height: 25px;

}

select{

    height: 31px !important;

}

.add{

    display: none;

}

You can test my cloned version: https://form.jotform.com/70726925554968 

And clone it in your account if you want to: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

Hope this helps. Let us know if you have more questions.

Thank you so much. That is excellent and extremely beneficial.
Nick
...