0

您好我想只选择表中每一行的第一个<td>（td带有文本“标签” ），如果您有一个简单的 html，例如：

<table>
  <tr><td>label</td> <td>value</td></tr>
  <tr><td>label</td> <td>value</td></tr>
  <tr><td>label</td> <td>value</td></tr>
</table>

例如，我想将 10% 的宽度分配给<td></td>带有选择器的第一组，我不想使用一个类。

我尝试了以下选择器：

table.widget tr:first-child td{
    width:10%;
    border:0;   
}

但是那个选择器只会选择第一个td而tr不是所有的，TD's所以我尝试了

table.widget tr td:first-child{
    max-width:10%;
}

当然我得到的是第一个孩子的选择TD。不是它td本身

有可能做到这一点吗？

4

3 回答 3

3

单程：

table tr td:first-of-type {
background: lemonchiffon;
}

http://jsfiddle.net/PRrq5/2/

于 2013-04-10T20:15:23.447 回答
3

您的第二个选择器实际上是正确的：

http://tinker.io/40f64

table.widget tr td:first-child {
    background: orange;
}

要选择每个 td 的第一个孩子，选择器应该是这样的：

table.widget tr td :first-child { /* note the space after the td */
    // styles
}

但是，应该注意的是，OP 的示例表没有widget应用类。

如果您的表表示键/值对的集合，则将标签文本放在 a 中th可能更合适：

http://tinker.io/40f64/1

table.widget th {
    background: orange;
}

<table class="widget">
  <tr><th>label</th> <td>value</td></tr>
  <tr><th>label</th> <td>value</td></tr>
  <tr><th>label</th> <td>value</td></tr>
</table>
于 2013-04-10T20:18:02.167 回答
0

尝试这个：

table tr td:first-child { color: red; }

小提琴：http: //jsfiddle.net/74MFH/1/

于 2013-04-10T20:15:34.133 回答