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:

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.

Accepted Answer

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>

Css Selector for Table Column

2 Answers

Must Read

Your Answer

Elena Rostova

Css Selector for Table Column

2 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

Elena Rostova