CSS selector for table column

Question

I dont have much experience with CSS, but I am trying to help a friend format a table using CSS. Right now I got stuck trying to format table width, here is an example of the table: https://form.jotform.com/53306318713148

If I want to change the input of all the fields I can just

table input {
width: 100px;
}

But now we want to have different input sizes for each one of the columns, so after reading about CSS selectors I was trying something of the following:

#cid_1 [id$=_1] {
width: 100px;
}

The thought was that I would select the element with id cid_1 and the the children of that element ending with id _1, but that does not seem to work. Seems like a most element solution would be to use some kind of :nth-child(). Probably a stupid question, butI was hoping someone could show me how to do this.

Answer 1

You can use css3 nth-child selector using this format:

table tr td:nth-child(2) input {
    background-color: red;
}

In the example above, the background color of the input inside the second column of each row will become red.

And in your case, you can say:

    table tr td:nth-child(2) input {
            width: 100px;
        }

    table tr td:nth-child(3) input {
            width: 200px;
        }
      ....

the selector's argument starts with 2, because the first one is labels for each row.

here's a working example

Answer 2

Your css does work, as you can see from this html dump.

 #cid_1 [id$="_1"] { border: 1px solid red; width: 100px; } 

 <ul class="form-section page-section"> <li class="form-line" data-type="control_matrix" id="id_1"> <label class="form-label form-label-top" id="label_1" for="input_1"> </label> <div id="cid_1" class="form-input-wide jf-required"> <table summary="" cellpadding="4" cellspacing="0" class="form-matrix-table"> <tr> <th align="left" class="form-matrix-row-headers"> Service Quality </th> <td align="center" class="form-matrix-values"> <input id="input_1_0_0" class="form-textbox" type="text" size="5" name="q1_input1[0][]" /> </td> <td align="center" class="form-matrix-values"> <input id="input_1_0_1" class="form-textbox" type="text" size="5" name="q1_input1[0][]" /> </td> <td align="center" class="form-matrix-values"> <input id="input_1_0_2" class="form-textbox" type="text" size="5" name="q1_input1[0][]" /> </td> <td align="center" class="form-matrix-values"> <input id="input_1_0_3" class="form-textbox" type="text" size="5" name="q1_input1[0][]" /> </td> </tr> </table> </div> </li> </ul>