How to Format an Input Table?

I would like to format the following items my input table.

- Change the width of the entire table, as well as the width of the columns/rows (want it to proportional to my form width)
- Change the background color of the title column/row
- Change font size (anything in parenthesis I want below the text that is NOT in parenthesis)
- When you click into the input table (while completing the form) the text changed from white to black. I want it to stay the same color.
- I'd like the check to be a different color

I was unsure how to do this in CSS editor in the aadvanced designer portion of the form.

Please give us the form URL of the form you're working on so we can also look at it and provide you the right CSS code for your requirements.

Guide: Where-to-Find-My-Form-URL

Looking forward to your response.

https://form.jotform.com/phillipsmgmt/Shuttle_Survey

I'll give an example of the code for each.

-Change the width of the entire table, as well as the width of the columns/rows (want it to proportional to my form width)

.form-matrix-table {
    min-width : 100% !important;
}

The width % value can be changed to adjust the overall width proportional to the form.

-Change the background color of the title column/row

Row headers background

.form-matrix-row-headers {
    background : blue;
}

Column headers background

.form-matrix-column-headers{
    background : green;
}

- Change font size (anything in parenthesis I want below the text that is NOT in parenthesis

Row headers

.form-matrix-row-headers {
    font-size : 18px;
}

Column headers

.form-matrix-column-headers{
    font-size : 18px;
}

- When you click into the input table (while completing the form) the text changed from white to black. I want it to stay the same color.

.form-line-error{
  color : white;
}

.form-line-active{
  color : white;
}

- I'd like the check to be a different color

As far as I know, it is not possible to change the color of the check mark in the input table.

This is great. Thank you so much. Final edit to this, how to I increase the row header width (Where the times are located) ?

The the row header width, it would be as follow for a proportional width:

.form-matrix-row-headers {
    min-width : 10%;
}

And this for a specific width:

.form-matrix-row-headers {
    min-width : 20px;
}

I did not see a change in header row width when I entered that CSS (the first one (10%))

Try with an important tag, it looks like the theme is applied is applying styling to the table as well.

.form-matrix-row-headers {
    min-width : 10% !important;
}

I am still not seeing the changes reflected on the form. Just in case there is a misunderstanding, the picture below is meant to clarify what I am looking for. I want all columns (Including the column containing all of the header rows) to be equal in width.

Try this custom CSS code:

.form-matrix-row-headers {
    min-width : 20% !important;
    width:10%!important;
}

Guide: How-to-Inject-Custom-CSS-Codes

You can change the 10% to your preference width.