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

Question

我们的用户正在使用一种工具来创建 HTML 内容，我无法控制它生成的 HTML，但我可以控制它背后的 CSS，而且我还设法插入了 jQuery。

我们的设计准则是，每当创建一个包含两列的表格时，第一列的宽度应为 300 像素，第二列的宽度应为 380 像素。

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

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

td
{
width: 300px;
}

但这将适用于所有 TD。

如果使用 CSS 无法做到这一点，我也会插入 jquery，如果使用 CSS 无法做到这一点，我很乐意使用它。

编辑:我需要此解决方案才能与 IE8 及更高版本、旧浏览器一起使用，但我们的大多数用户仍在使用它。

Answer 1

使用:nth-child()

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

另请阅读

:last-child

:first-child

更新

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

或

由于 IE8 支持 first-child，您可以欺骗它以在 IE8 中支持 nth-child

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