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