如何使用CSS或jQuery设置不同的表宽度？

Question

我们的用户正在使用工具来创建HTML内容，我无法控制它生成的HTML，但我确实可以控制它背后的CSS，我也设法插入jQuery。

我们的设计指南是，每当创建一个包含两列的表时，第一列的宽度应为300px，第二列的宽度应为380px。

当他们创建表格时，他们可以从工具中选择设置每个表格单元格的宽度，但是为了保存它们，我想自动将其应用于HTML。

有没有办法使用CSS规则来设置td1和td2的表格宽度？我知道在CSS中我可以做类似的事情：

td
{
width: 300px;
}

但这将适用于所有道明。

如果使用CSS无法实现，我也会插入jquery，并且如果无法使用CSS，则很乐意使用它。

编辑： 我需要这个解决方案来使用IE8及更高版本的旧浏览器，但我们的大多数用户仍然使用它。

Answer 1

使用:nth-child()

table tr td:nth-child(n) { 
    width: 300px;
}

同时阅读

:last-child

:first-child

<强>更新

您可以使用支持IE的css3选择器的http://selectivizr.com/ JS。

或

由于IE8支持first-child，您可以通过此操作来支持nth-child中的IE8

/*table tr td:nth-child(2)*/
    table tr td:first-child+ td { width: 300px; }/*Works for IE8*/

Answer 2

ie8不支持nth-child解决它你可以做到这一点

table tr td:first-child + td +td { //gets 3rd td
    width:300px;
}

DEMO

Answer 3

你可以在CSS和JQuery中做到这一点

在CSS中，您只需使用first-child伪类选择器http://www.w3.org/TR/CSS2/selector.html#first-child

   td { width: 380px; }
   td:first-child { width: 300px; }