Adjust Input Table Cell Width

I have the following table on my form and I need to shorten the width of the first cell (DISC Scores) and change the length of the Score to hold 4 charcs. The CSS I identified isn't affecting the cell.

Thanks in advance for your help.

Hi Koaching,

To adjust the column width, you can inject the custom CSS codes below. Let me show you how to do it:

1. First, copy the code below:

/* Shrink the entire matrix table */

#id_106 table.form-matrix-table {

  width: 150px !important;      /* adjust total table width */

  table-layout: fixed !important; /* enforce fixed widths */

  margin-left: 180px; /*adjust the value to move the table to the right*/

}



/* First column (DISC Scores) */

#id_106 table.form-matrix-table th:first-child,

#id_106 table.form-matrix-table td:first-child {

  width: 120px !important;     /* adjust as needed */

  white-space: normal !important;

  word-break: break-word !important;

}



/* Second column (Score input) */

#id_106 table.form-matrix-table th:nth-child(2),

#id_106 table.form-matrix-table td:nth-child(2) {

  width: 55px !important;   /* fixes the cell width */

}



#id_106 table.form-matrix-table td:nth-child(2) select {

  width: 100% !important;   /* fill the cell */

  max-width: none !important;

  box-sizing: border-box !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.

Here's the sample result after injecting the custom CSS codes:

Give it a try and let us know if you have any other questions.