<td>に配置した<input>がセルいっぱいにならない

Question

<table>で商品リストを作り、そこへ数量を入力するテキストボックスを表示するデザインを作っています。 次画面への値のPOST等は正常に動いているのですが、<td>セル内にどうしても隙間ができてしまします（画像参照）。

（height:4px削除後）

<td>内いっぱいにテキストボックスを表示したいのですが、うまくできません。 padding、marginをcssで０に設定してみましたが駄目でした。

		<div>
			<table class ="center-position" border="1">
			<!-- 見出し項目表示箇所 Start -->
			<tr style=color:"#ffffff" bgcolor="#000000" height=30px>
				<th class ="menu" width=100>メーカー</th>
				<th class ="menu" width=220>商品名</th>
				<th class ="menu" width=100>単価（円）</th>
				<th class ="menu" width=50>数量</th>
			</tr>
		<!-- 見出し項目表示箇所 End -->

		<!-- 検索データ表示箇所 Start -->
			{section name=dbList loop=$result}
				<tr height=35px>
					<td class="display-center">{$result[dbList].MAKER}</td>
					<td class="display-left">{$result[dbList].NAME}</td>
					<td class="display-right">{$result[dbList].KINGAKU}</td>
					<td width=50><input class = "number2" type="tel" name="suryo[]" autocomplete="off" maxlength="2" style="width:50px; height:4px; font-size: 17px;"></td>
				</tr>
			{/section}
		<!-- 検索データ表示箇所 End -->
			</table>

table.center-position {
	margin: 0px 50px 0px 50px;
	float: center;
	
}
.display-center {
	text-align: center;
}
.display-right {
	text-align: right;
}
.display-left {
	text-align: left;
}
th.menu {
	background-color:#000000;
	color:#ffffff;
}

Answer 1

最後の<td>を以下のようにするとどうでしょうか？

<td width=50 style="height: 100%; padding: 0;">
  <input class="number2" type="tel" name="suryo[]" autocomplete="off" maxlength="2" style="width:50px; font-size: 17px;">
</td>

以下の画像は上記のコードで表示した時のものです。
ぴったり収まりすぎて分かりづらいかもしれませんが、数量はテキストフィールドになっています。

Comments

[root_jp]

少なくともご提示いただいているソースコードだけでは、height指定を削除してテキストボックスが縦に伸びるということはありません。
それでも伸びるのであれば、それは他のスタイルが効いているためだと思いますので、その部分を探す必要があると思います。

[root_jp]

すみません。
少し語弊がありそうな説明でした。
height: 4pxを消すことで、4pxよりは伸びる可能性はありますが、載せられている画像のサイズほど伸びることはないと思いますという意味です。

[Melancholic]

root_jp様より教示いただいた要素をHTMLへ追記すると、ボックスが<td>内にしっかり収まりました。

念のため、CSSへinput、textareaともに何も要素を指定しない形でスタイルを作成し意図しない幅設定などが出てこないようにしてみました。
大変助かりました、ありがとうございます！

Answer 2

<input>にheight:4pxを指定しているからでは？

<input class = "number2" type="tel" name="suryo[]" autocomplete="off" maxlength="2" style="width:50px; height:4px; font-size: 17px;">

Comments

[Melancholic]

height指定を削除すると、ボックスの縦幅が画像（質問内へ追加）のように伸びてしまいます。
また、親タグの<tr>を<tr style= "height=5px;">に書き直してみましたが、隙間は変わりませんでした。

[Melancholic]

すみません、<tr style= "height=4px;">の間違いです。
<input>タグの指定と合わせました。