formatting input table widget

how can I change the color scheme of the input table widget --as well as width of rows and columns? I'd like to use a different color than grey for the titles of rows and columns.

Hi Carolyn,

Thanks for reaching out to Jotform Support. I'm an AI assistant here to assist you.

Regarding your question about changing the color scheme and width of rows and columns in the Input Table widget, including using a different color than grey for the titles of rows and columns, here is what you can do:

The Input Table element in Jotform allows you to customize row and column labels directly, but it does not provide built-in options to change the color scheme or width of rows and columns through the widget's properties panel.

However, you can use custom CSS injected into your form to style the Input Table widget. With custom CSS, you can:

• Change the background color and text color of the row and column titles (headers).
• Adjust the width of rows and columns.

To apply custom CSS, you would need to:

1. Open your form in the Form Builder.
2. Go to the Form Designer or Advanced Designer.
3. Inject custom CSS code targeting the Input Table widget's header cells to change their background color from grey to your preferred color.
4. Use CSS rules to set the width of columns and rows as needed.

Unfortunately, Jotform's standard Input Table widget settings do not include direct controls for color or width customization, so CSS is the way to achieve this.

If you need help with the exact CSS code to use, please let me know your preferred colors and widths, and I can assist you with the code snippet.

Give it a try and let us know how it goes.

what is the css code?

Hi Carolyn,

Let me help you with that:

To change the color scheme and width of rows and columns in the Input Table widget using CSS, you can inject custom CSS code directly into the widget's Custom CSS tab. Here's a basic example of CSS code you can use to change the background color and text color of the row and column titles (headers), as well as adjust the width of columns:

/* Change background color and text color of column headers */
.table-header {
background-color: #4CAF50; /* Example: green background */
color: white; /* Text color */
}

/ Change background color and text color of row headers / .table-row-label { background-color: #2196F3; / Example: blue background / color: white; / Text color / }

/ Adjust width of columns / .table-cell { width: 150px; / Set desired width / }

To apply this CSS:

1. Open your form in Form Builder.
2. Select the Input Table widget.
3. Click the Wand icon to open widget settings.
4. Go to the Custom CSS tab.
5. Paste the CSS code above and modify colors and widths as you prefer.
6. Click Update to save changes.

Note that the class names like .table-header, .table-row-label, and .table-cell are examples. You may need to inspect your form's HTML or check the widget's documentation to confirm the exact class names used for headers and cells in the Input Table widget.

If you provide your preferred colors and widths, I can customize the CSS code snippet for you.

Give it a try and let us know how it goes.

Hi Carolyn,

Following up on the previous message, you can customize the color scheme and column widths of the Input Table widget by adding custom CSS in the widget settings.

Here’s a simple example:

/ Change background color and text color of row headers / .table-row-label { background-color: #2196F3; /Example: blue background / color: white; / Text color / }

To apply this:

1. Open your form in the Form Builder.
2. Select the Input Table widget.
3. Click the wand icon to open settings.
4. Go to the Custom CSS tab.
5. Paste the code and adjust it as needed.
6. Click Update to save.

Let us know if you have any questions—we’re here to help!

Hi Carolyn,

You can easily adjust the color scheme and the row or column widths in the Input Table widget by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

.form-matrix-headers.form-matrix-column-headers.form-matrix-column_0 {

  width : 20% !important;

}



.form-matrix-row-headers, .form-matrix-column-headers {

  background-color: #cfe6ff !important;

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.

Check out my screenshot below to see the result:

Give it a try and let us know how it goes.