0

たとえば、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/は、ドロップダウンフィールドでそれを行う方法の例です。入力フィールドに似たものが必要です。

4

2 に答える 2

0

max-width は Chrome と Firefox で動作します: http://jsfiddle.net/22Puw/4/

td input {
      max-width : 20px; 
}
于 2013-06-26T12:04:15.000 に答える
0

これを CSS に追加することで、テーブルを固定幅に設定できます。

    table {
        table-layout:fixed;
        width:60px;
    }
于 2013-06-26T12:15:55.283 に答える