jquery - 只需使用CSS或性能jQuery设置宽度

<table border="1">
    <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
</table>

http://jsfiddle.net/BUadD/

我想简单地设置witdh作为输入。对于第一列中的所有输入，我想要例如30px，第二个50px，第三个20px和最后40 px。
CSS或jQuery都能适用吗？我必须为每个输入添加它吗？

最佳答案

下面的CSS将使输入的第一列宽30px，第二列50px，第三列20px和最后40px。如罗里（Rory）所述，选择器在所有眉毛咳嗽IE中均无法正常工作。

td:first-child input[type="text"] {
    width: 30px;
}
td:nth-child(2) input[type="text"] {
    width: 50px;
}
td:nth-child(3) input[type="text"] {
    width: 20px;
}
td:last-child input[type="text"] {
    width: 40px;
}

使用jQuery，您仍然可以效仿此方法，请在此处查看示例：http://jsfiddle.net/BUadD/2/

$('td:first-child input[type="text"]').css('width', '30px');
$('td:nth-child(2) input[type="text"]').css('width', '50px');
$('td:nth-child(3) input[type="text"]').css('width', '20px');
$('td:last-child input[type="text"]').css('width', '40px');

它对我来说在IE9中有效。