如何在表

Question

嗨选择所有的首个TD的，我想（与文本“标签”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> 

我想分配例如只有第一个<td></td>组的10％的宽度与选择器我不想要使用类。

我已经试过了如下选择：

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

但是，选择只将选择第一tr的第一td没有全部TD's所以我尝试

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

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

它可以实现这个？

Answer 1

你的第二选择实际上是正确的：

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类应用于它。

如果你的表是表达键/值对的集合，把你的标签文本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> 

Answer 2

方式一：

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

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

Answer 3

试试这个：

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

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