1 
<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。对于第一列中的所有输入，我想要例如 30 像素，第二个 50 像素，第三个 20 像素和最后 40 像素。这对所有人来说都可以使用 CSS 或 jQuery 吗？我必须为每个输入添加这个？

4

3 回答 3

1

只需像这样添加class="classname"到输入中：

<input class="left_col" type="text">

然后将其添加到您的CSS：

input.left_col {
    width: 30px;
}

你可以为你想要的所有列做这个，只要记住给他们不同的名字。

于 2012-04-17T11:11:37.043 回答
1

大多数机械手适用于所有领域

$("table input[type=text]").css("width", "30px");

将为所有输入字段设置宽度。要使用最后一个或第一个字段，请使用 :first 或 :last 选择器：

$("input[type=text]:last").css("width", "30px");

如果要为每个字段设置自定义宽度，最好设置“输入ID”或“输入名称”，以简化操作：

$("#id1").css("width", "30px");
$("#id2").css("width", "20px");

Foreach 循环对您来说不是一个好的选择，例如，如果您有一个大小算法，例如每个字段的 size*2，那么您可以使用它

于 2012-04-17T11:23:12.003 回答
1

下面的 CSS 将使输入的第一列宽 30 像素，第二列 50 像素，第三列 20 像素，最后 40 像素。正如 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。

于 2012-04-17T11:29:24.640 回答