javascript - Javascript 或 jQuery 需要输入字段自动增长，但或需要修复

Question

例如 2 个 HTML 行。第一行是标题。第二行用于输入。设置了所有的默认宽度<td>。

用户开始在输入字段中输入内容。由于 tex 的长度超过<td>输入字段的默认宽度开始自动增长。

这是我的示例 http://jsfiddle.net/rigaconnect/22Puw/2/

<tr>
<td width="20">1</td>
<td width="20">2</td>
</tr>

<tr>
<td width="20">
<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"  style="width:20px;">
</td>
<td width="20">
<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"  style="width:20px;">
</td>
</tr>

问题是它<td>也会自动生长。

需要<td>始终具有默认（固定）宽度；只增长输入字段，好像<td>在右边。

试图设置最大宽度<td style="max-width:20px;">没有解决方案。

然后尝试了这个（对于 header <td>）

<td style="width: 20px; display: inline-block;">1</td>
<td style="width: 20px; display: inline-block;">2</td>

但在这种情况下，它们处于垂直位置（不是水平位置）。

这里http://jsfiddle.net/rigaconnect/RURYw/10/是如何使用下拉字段的示例。需要与输​​入字段类似的东西。

Answer 1

您可以通过将其添加到 CSS 中来将表格设置为固定宽度：

    table {
        table-layout:fixed;
        width:60px;
    }

Answer 2

max-width 在 Chrome 和 Firefox 中对我有用：http: //jsfiddle.net/22Puw/4/

td input {
      max-width : 20px; 
}