用於表列的CSS選擇器

我對CSS沒有多少經驗，但我試圖幫助朋友使用CSS格式化表格。現在我被困試圖格式化表格的寬度，這裏是表的例子： https://form.jotform.com/53306318713148 用於表列的CSS選擇器

如果我想改變這一切我只能

table input { 
width: 100px; 
}

但現在我們想要的字段輸入有對列的每一個不同的輸入尺寸，所以閱讀CSS選擇器後，我嘗試以下的東西：

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

的想法是，我會選擇與ID cid_1元素和的孩子該元素以id _1結尾，但似乎不起作用。似乎最基本的解決方案是使用某種：nth-child（）。可能是一個愚蠢的問題，但我希望有人能告訴我如何做到這一點。

來源

2015-11-27 Mac

請出示一些HTML以及因此我們更容易可以提供幫助。 – LGSon

可以使用這種格式使用CSS3第n個孩子選擇：

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開始，因爲第一個爲每個行的標籤。

這裏有一個working example

來源

2015-11-27 21:16:21

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

來源

2015-11-27 21:10:29 LGSon

用於表列的CSS選擇器

回答

相關問題