用于表列的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选择器

回答

相关问题