Input Table CSS: Customize $ Sign Display in Specific Columns and Sections

In the Auto section in the input table, I need $ also in the third column, purchase price if relevant

In the vacation section, in the input table, I need the $ signs to disappear.

I need these changes to be specific to each input table

Hi Sarah, 

Thanks for reaching out to Jotform Support. You can easily add the dollar sign on you Input Table by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

li#id_391 .form-matrix-values:nth-child(3)::before {

content: "$";

position: absolute;

left: 8px;

top: 50%;

transform: translateY(-50%);

color: #000;

pointer-events: none;

font-size: 14px;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Regarding with the dollar sign on the Vacation Input Table, I checked your form and it was no longer showing. Take a look at the screenshot below to see my results:Give it a try and let us know how it goes.

When I use your code, it puts the $ in the 2nd column; I need the third. There are still $ signs on the vacation. I need them gone.

Hi Sarah,

To clarify, this is the form 260786815500156 you're working on, right? I just checked and it looks like you've managed to adjust the code, since the dollar sign is now displaying in the third column. Can you confirm if you still need any assistance with the input table or CSS code?

Reach out to us again if you need more help.

no this one: 253155436056052

Hi Sarah,

Thank you for sharing the form. You can use the CSS code below instead:

li#id_391 .form-matrix-values:nth-child(4)::before {

content: "$";

position: absolute;

left: 8px;

top: 50%;

transform: translateY(-50%);

color: #000;

pointer-events: none;

font-size: 14px;

}

Check out my result:

Let us know if there's anything else we can help you with.

Thank you, they aren't the same size or placement as the other ones. Can you help me with making them the same as the others?

I also need the $ signs removed from the vacation in put table

Hi Sarah,

You can replace the code I shared earlier with this:

li#id_391 .form-matrix-values:nth-child(4)::before {

content: "$";

position: absolute;

left: 8px;

top: 18px;

transform: translateY(-50%);

color: #444;

pointer-events: none;

font-size: 17px;

}

I've made a few adjustment to the code to match the alignment, color, and font size of the other dollar sign in the table.

As for the vacation input table, you can use the code below:

li#id_456 .form-matrix-values:nth-child(5):before, li#id_456 .form-matrix-values:nth-child(6):before {

content: "" !important;

}

Check out my result:

Let us know if there's anything else we can help you with.

Amazing, those all worked. Now I need to hide the row headings for all my input tables in the form. Can you help me?

Hi Sarah,

To hide all row headings for all input tables, just add the codes below:

.form-matrix-row-headers {

 font-size: 0;    /* hides text */

 line-height: 0;

 padding: 0 !important;

 border: none;

}



.form-matrix-row-headers label {

 display: none;

}



/* shrink the first column safely */

.form-matrix-table tr td:first-child,

.form-matrix-table tr th:first-child {

 width: 1px;

 min-width: 1px;

 max-width: 1px;

 padding: 0 !important;

}

td.form-matrix-values {

  padding-top: 5px;

  padding-bottom: 5px;

}

Here's how it would appear:

Give it a try and let us know if you need any help.