CSS selector for table column

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:

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.

2 Answers

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

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

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

<ul> <li> <label for="input_1"> </label> <div> <table summary="" cellpadding="4" cellspacing="0"> <tr> <th align="left"> Service Quality </th> <td align="center"> <input type="text" size="5" name="q1_input1[0][]" /> </td> <td align="center"> <input type="text" size="5" name="q1_input1[0][]" /> </td> <td align="center"> <input type="text" size="5" name="q1_input1[0][]" /> </td> <td align="center"> <input type="text" size="5" name="q1_input1[0][]" /> </td> </tr> </table> </div> </li> </ul>