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

Question

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

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

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

有没有办法使用 CSS 规则来设置 td1 和 td2 的表格宽度？我知道在 CSS 中我可以执行以下操作：

td
{
width: 300px;
}

但这将适用于所有 TD。

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

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

score 2 · Accepted Answer

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

另请阅读

更新

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

或者

由于 IE8 支持first-child你可以欺骗它来nth-child支持IE8

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

score 1 · Accepted Answer

ie8 不支持 nth-child 来解决它，你可以这样做

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

score 0 · Accepted Answer

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

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

3 回答 3