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 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>
