CSS表格列选择器

Question

我不太擅长CSS，但我正在尝试使用CSS帮助朋友格式化表格。目前，我在尝试格式化表格宽度时遇到了困难。以下是表格示例： https://form.jotform.com/53306318713148 如果我想更改所有字段的输入，我只需

table input {
width: 100px;
}

但是现在我们希望每个列都有不同的输入大小，所以在阅读了有关CSS选择器的内容后，我尝试了以下内容：

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

我的想法是选择id为cid_1的元素及以_id结尾的其子元素，但似乎并不起作用。使用:nth-child()可能是一种更通用的解决方案。这可能是一个愚蠢的问题，但我希望有人能向我展示如何做到这一点。

- Mac

---

请展示一些HTML代码，这样我们可以更容易地提供帮助。 - Asons

Answer 1

你可以使用css3的nth-child选择器，格式如下：

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

在上面的示例中，每行第二列中输入框的背景颜色将变为红色。

而在您的情况下，您可以这样说：

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

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

选择器的参数以2开头，因为第一个是每行的标签。

这里有一个工作示例。

- Arash DaneshAraste

---

td:nth-child(N) 不等同于第 N 列。如果前一行中有一个单元格使用了 rowspan 属性并跨越到当前行，就会导致计数错误；此时 td:nth-child(N) 将位于第 N+1 列。 - Abigail

Answer 2

你的CSS确实有效，正如你可以从这个HTML转储中看到的那样。

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

- Asons