CSS选择器来选择第一个和第二个表格单元格

问题描述：

有人可以帮我计算出我需要哪些选择器来更改我的两列表格全局列的宽度？CSS选择器来选择第一个和第二个表格单元格

利用这一点，当然会选择所有单元格：

table td { 
    width: 50px; 
}

我想是这样的：

<table> 
    <tr> 
     <td style="width: 50px">data in first column</td> 
     <td style="width: 180px">data in second column</td> 
    </tr> 
    <tr> 
     <td style="width: 50px">more data in first column</td> 
     <td style="width: 180px">more data in second column</td> 
    </tr> 
</table>

我希望把宽度规格在样式表而不是打字每个标签隐含的宽度。什么CSS选择器会让我适当地设置50px宽度和180px？

答

是的。

td:first-child{ 
    width:50px; 
} 

td:nth-child(2){ 
    width: 180px; 
}

，或者作为建议的Brainslav的编辑：

td:nth-child(1) { 
     width: 50px;} 
td:nth-child(2) { 
     width: 180px;}

link

答

尝试在您的标记使用class名称和利用colgroup。这是迄今为止最简单的方法，因为您只在colgroup中定义宽度，并且是跨浏览器兼容的。

例如，

<table> 
    <colgroup> 
     <col class="colOne" /> 
     <col class="colTwo" /> 
    </colgroup> 
    <tr> 
     <td>data in first column</td> 
     <td>data in second column</td> 
    </tr> 
    <tr> 
     <td>more data in first column</td> 
     <td>more data in second column</td> 
    </tr> 
</table> 

/* CSS */ 

.colOne{ 
    width: 50px; 
} 
.colTwo{ 
    width: 180px; 
}

见琴：虽然http://jsfiddle.net/4ebnE/

一件事，colgroup在HTML5已经过时了。但是，HTML5还没有标准化，所以你可以打电话。

哦，这是可能的，如果你看中了，没有任何CSS做：

<table> 
    <colgroup> 
     <col width="50"/> 
     <col width="180" /> 
    </colgroup> 
    <tr> 
     <td>data in first column</td> 
     <td>data in second column</td> 
    </tr> 
    <tr> 
     <td>more data in first column</td> 
     <td>more data in second column</td> 
    </tr> 
</table>

很好的回答！更好的是，'colgroup'不会在[HTML5]（https://www.w3.org/TR/html5/tabular-data.html#the-colgroup-element）中被弃用。 – 2017-12-01 11:01:07

答

我认为最好的办法是使用CSS伪选择：

table tr td:first-child { 
    width: 50px; 
} 
table tr td:last-child { 
    width: 150px; 
} 
td { 
    background: gray; 
} 

<table> 
    <tr> 
     <td>data in first column</td> 
     <td>data in second column</td> 
    </tr> 
    <tr> 
     <td>more data in first column</td> 
     <td>more data in second column</td> 
    </tr> 
</table>

这里有一个例子的jsfiddle：http://jsfiddle.net/scottm28/gGXy6/11/

另外，您也可以使用CSS3 :nth-child() Selector

CSS选择器来选择第一个和第二个表格单元格

相关推荐