Question

有人可以帮助我确定在我的两个列表中全局更改列宽度所需的选择器吗？

使用此功能，当然会选择所有单元格：

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适当？

Answer 1

是的。

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

Answer 2

尝试在标记中使用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/

但有一点，HTML5中不推荐使用colgroup。但是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>

Answer 3

我认为你最好的选择是使用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 Selector用于选择第一个和第二个表格单元格

3 个答案: