6

有人可以帮我弄清楚在我的两列表上全局更改列的宽度需要哪些选择器？

使用它，当然会选择所有单元格：

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 的宽度？

4

3 回答 3

20

是的。

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

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

或者，正如 Brainslav 的编辑所建议的那样：

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

关联

于 2013-03-09T02:00:24.210 回答
3

尝试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>
于 2013-03-09T02:01:40.467 回答
0

我认为你最好的选择是使用 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() 选择器

于 2013-03-09T02:10:56.063 回答