Question

<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/

I would like simply set witdh for input. For all input in first columns i would like for example 30px, for second 50px, for third 20px and for last 40 px.
Is possible this with CSS or jQuery for all? I must add this for each input?

Answer 1

The CSS below will make the first column of inputs 30px wide, the second 50px, the third 20px and the last 40px. As noted by Rory, selectors do not work as expected in all browsrs cough 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;
}

​
With jQuery, you could emulate this anyway, see an example here: 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');

And it worked in IE9 for me.