Html 用于选择第一个和第二个表格单元格的 CSS 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15306303/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Selector to select first and second table cells
提问by Icemanind
Can someone help me figure what selectors I need to change the width of my columns globally on my two column table?
有人可以帮我弄清楚在我的两列表上全局更改列宽度需要哪些选择器吗？
Using this, will of course select all cells:
使用这个，当然会选择所有单元格：
table td {
width: 50px;
}
What I want is this:
我想要的是这个：
<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>
I'd like to put the width specification in a style sheet rather then typing the width implicitly for each tag. What CSS selector will let me set the 50px width and 180px appropriately?
我想将宽度规范放在样式表中，而不是为每个标签隐式键入宽度。什么 CSS 选择器可以让我适当地设置 50 像素的宽度和 180 像素？
回答by Nobita
回答by Amy
Try using classnames in your markup and utilizing colgroup. It's by far the least hassle since you define the width only in colgroup, and is cross-browser compatible.
尝试class在标记中使用名称并使用colgroup. 这是迄今为止最不麻烦的，因为您仅在 中定义宽度colgroup，并且是跨浏览器兼容的。
Eg.
例如。
<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;
}
See fiddle: http://jsfiddle.net/4ebnE/
见小提琴：http: //jsfiddle.net/4ebnE/
One thing though, colgroupis deprecated in HTML5. But then again HTML5 isn't standardized yet, so you can make the call.
但有一件事，colgroup在 HTML5 中已被弃用。但话又说回来，HTML5 尚未标准化，因此您可以拨打电话。
Oh, and it's possible to do without any CSS if you fancy:
哦，如果您愿意，也可以不使用任何 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>
回答by Scott
I think your best bet would be to use css pseudo-selectors:
我认为你最好的选择是使用 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>
Here's an example on JSFiddle: http://jsfiddle.net/scottm28/gGXy6/11/
这是一个关于 JSFiddle 的例子：http: //jsfiddle.net/scottm28/gGXy6/11/
Alternatively, you could also use CSS3 :nth-child() Selector
或者，您也可以使用CSS3 :nth-child() 选择器
