htmlでインプットボックスを横並びに表示したい。

質問

ホームページを作成しておりますが、tdの中にinput type="text"にてテキストボックスを4つ作成したいと考えております。
こちらで拝見いたしましたチェックボックスの右側に文字を表示される方法をご参考にさせていただき、下記を作成しましたが、縦並びになってしまいます。
何とかして縦2×横2に置き換えることはできないでしょうか？
ブラウザはIE11を使用しており、コードはVisualStudioCodeを使用しております。

<div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5">
<div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333">
<table border="1" height="252" width="818">
<tr bgcolor="gray" style="color:white" height="50">
<th height="42" width="92"><b>列1</b></th>
<th height="42" width="212">列2・列3<br>列4・列5</th>
<th height="42" width="137">列7/列8</th>
<th height="42" width="189"><b>列9/列10</b></th>
</tr>
<tr bgcolor="lightyellow">
<td align="center" height="47" width="92">
<input type="text" name=列1 style="background:white; color:#000000;" align="middle" value="83行目">
</td>
<td align="center" height="47" width="312">
<input type="text" name=列2 style="background:white; color:#000000;" align="middle" value="86行目">
<input type="text" name=列3 style="background:white; color:#000000;" align="middle" value="87行目">
<input type="text" name=列4 style="background:white; color:#000000;" align="middle" value="88行目">
<input type="text" name=列5 style="background:white; color:#000000;" align="middle" value="89行目">
</td>
<td align="center" height="47" width="137"><input type="text" name=列7 style="background:white; color:#000000;" align="middle" value="92行目">
<span>
<input type="text" name=列8 style="background:white; color:#000000;" align="middle" value="93行目">
</span>
</td>
</div>
<td align="center" height="47" width="189"><input type="text" name=列9 style="background:white; color:#000000;" align="middle" value="96行目">
<input type="text" name=列0 style="background:white; color:#000000;" align="middle" value="97行目">
</td>

</tr>
<tr>
<td align="center" height="47" width="92"></td>
<td align="center" height="47" width="212"></td>
<td align="center" height="47" width="137"></td>
<td align="center" height="47" width="189"></td>
</tr>
</table>
</div>
</div>

【上記で表示させた場合】
ーーーーー｜　　86行目　　｜ーーーーー｜
ーーーーー｜　　87行目　　｜ーーーーー｜　　96行目　
83行目　　｜　　88行目　　｜　　92行目｜　　97行目
ーーーーー｜　　89行目　　｜ーーーーー｜

【やりたいこと】
ーーーーー｜ーーーーーーーーーー｜ーーーーー｜
ーーーーー｜　　86行目｜87行目　｜ーーーーー｜　　96行目　
83行目　　｜　　88行目｜89行目　｜　92行目　｜　　97行目
ーーーーー｜ーーーーーーーーーー｜ーーーーー｜

回答No.1

dell_OK · ベストアンサー

方法はいろいろありそうですが、まず、縦並びになっているのはそのセルの幅が狭いためだと思われます。

例えばそのセルの幅を"500"とかに広げるとふたつ目のインプットボックスで折り返されて、見た目は２×２になると思います。

他には、スタイルで自動折り返しを禁止して、ふたつ目のインプットボックスに改行を入れる方法。
具体的には、そのセルの<td>内に style="white-space:nowrap;" を追加して、ふたつ目のインプットボックスの後ろに <br> を入れる。

余計なお世話かも知れませんが、やたらと高さや幅を細かく設定していますが、最終的な配置（今回のような縦横並びなど）ができてから設定した方がいいと思います。
そのせいで思い通りにならず、原因がわかりづらくなるからです。
もともとインプットボックスは横に並ぶものなのに、幅を狭くすることで意図的に縦に並ばせているのかな、と後から見た人に誤解されます。

上で私があげた方法はいい方法ではありません。
あくまで、そう見える、方法であって、配置は配置させるようなhtmlを書いた方がいいでしょう。

お礼

ご回答いただきありがとうございました。
いただいた内容で入力したところ、ほぼ希望通りの表示となりました。
ちなみにですが、インプットボックスの幅を小さくするにはどうしたらよいのでしょうか？
お手数ですがご教示願います。