たとえば、2 つの HTML 行。最初の行はヘッダーです。2 行目は入力用です。すべてのデフォルトの幅<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/は、ドロップダウンフィールドでそれを行う方法の例です。入力フィールドに似たものが必要です。