Javascript或jQuery需要自動增長輸入字段，但是 <td> 要么 <div> 需要修復

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;">沒有解決方案。

然后嘗試這個（對於標題<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

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

td input {
      max-width : 20px; 
}

Answer 2

您可以通過將表添加到CSS來將表設置為固定寬度：

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