QA@IT
«質問へ戻る

質問を投稿

html のinput="text"のタグの幅を自動的に最大に設定したい。

HTMLのタグというかCSSというかデザインについて困っています。
表現がよく解らないのですが、よくアンケートであるような

名前:鈴木一郎
年齢:51歳

みたいな項目を作ろうとしています。
以下のようなタグを作成しました。

<table>
<tr>
<td style="width:100px">
  <img src="/assets/dummy.png">&nbsp;名前&nbsp;:&nbsp;
</td>
<td>
  <input type="text" placeholder="名前を設定してください。">
</td>
</tr>
</table>

これをダイアログの中に表示して、アンケートの入力欄のようなものを作ろうとしています。
問題となっているのは、名前の入力欄(inputタグの所)の横幅が可変という事です。

左の列の「名前」とかの欄は固定の幅(100px)なのですが、右側の入力欄は、残りの枠の幅で最大値に設定したいのです。
右側の列のTDに「width=100%」を付与すると、今度は左側の列がつぶれてしまい、文字と画像が乱れてしまいます。

出来れば、左側の列を固定にして、右側の列の幅を可変にし、テキストボックスを最大まで広げるような作りにしたいのですが、そのような事は可能なのでしょうか?

いくつかサンプルを見ていると、やはり大きさが可変のコントロールはそこそこ難易度が高いようですが、やはり無理があるのでしょうか?

HTMLのタグというかCSSというかデザインについて困っています。
表現がよく解らないのですが、よくアンケートであるような

名前:鈴木一郎
年齢:51歳

みたいな項目を作ろうとしています。
以下のようなタグを作成しました。

```html
<table>
<tr>
<td style="width:100px">
  <img src="/assets/dummy.png">&nbsp;名前&nbsp;:&nbsp;
</td>
<td>
  <input type="text" placeholder="名前を設定してください。">
</td>
</tr>
</table>
```

これをダイアログの中に表示して、アンケートの入力欄のようなものを作ろうとしています。
問題となっているのは、名前の入力欄(inputタグの所)の横幅が可変という事です。

左の列の「名前」とかの欄は固定の幅(100px)なのですが、右側の入力欄は、残りの枠の幅で最大値に設定したいのです。
右側の列のTDに「width=100%」を付与すると、今度は左側の列がつぶれてしまい、文字と画像が乱れてしまいます。

出来れば、左側の列を固定にして、右側の列の幅を可変にし、テキストボックスを最大まで広げるような作りにしたいのですが、そのような事は可能なのでしょうか?

いくつかサンプルを見ていると、やはり大きさが可変のコントロールはそこそこ難易度が高いようですが、やはり無理があるのでしょうか?