tdの中にinputを2つ横並びにし、2行作成する。

Question

ホームページを継続して作成しておりますが、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行目
ーーーーー｜ーーーーーーーーー｜ーーーーー｜

Answer 1

<table>タグ、<tr>タグも省略せずに提示してください。でないと検証できないので、回答者が追加する手間がかかります。

下記のような感じでどうですか。

<table>
  <tr>
    <td align="center" height="47" width="212">
      <input type="text" name=kosu style="background:white; color:#000000;" align="middle" value="86行目">
      <input type="text" name=kosu2 style="background:white; color:#000000;" align="middle" value="87行目">
      <input type="text" name=kosu3 style="background:white; color:#000000;" align="middle" value="88行目">
      <input type="text" name=kosu4 style="background:white; color:#000000;" align="middle" value="89行目">
    </td>
    <td align="center" height="47" width="212">
      <input type="text" name=kosu style="background:white; color:#000000;" align="middle" value="90行目">
      <input type="text" name=kosu2 style="background:white; color:#000000;" align="middle" value="91行目">
      <input type="text" name=kosu3 style="background:white; color:#000000;" align="middle" value="92行目">
      <input type="text" name=kosu4 style="background:white; color:#000000;" align="middle" value="93行目">
    </td>
  </tr>
</table>

td {
  display: inline-flex;
  flex-wrap: wrap;
}
td>input {
  width: 50%;
  box-sizing: border-box;
}

Codepenサンプル

Comments

[kansai5963]

ご回答いただきありがとうございます。
コード、画面表示、やりたいことを若干修正させていただきました。
しかしながら列1の部分にすべてのテキストボックスが表示されてしまう状態です。
列1には1つのテキストボックス、列2に縦2×横2のテキストボックス、列3に縦2のテキストボックス、列4に縦2のテキストボックスを置きたいというのが今回の最終目的です。

[hatena19]

下記のサンプルでどうですか。

https://codepen.io/hatena19/pen/dyMZzNw

Answer 2

訂正

IE11という部分を見落としてましたので訂正します。

<td align="center" height="47" width="212">
↓
<td align="center" height="47" width="312">

本当は、CSSで書いた方がいいと思います。

訂正前

こんばんは。

こういうことでしょうか？

サンプル

        <td align="center" height="47" width="212">
            <input type="text" name=kosu style="background:white; color:#000000;" align="middle" value="86行目">
            <input type="text" name=kosu2 style="background:white; color:#000000;" align="middle" value="87行目">
          <input type="text" name=kosu3 style="background:white; color:#000000;" align="middle" value="88行目">
          <input type="text" name=kosu4 style="background:white; color:#000000;" align="middle" value="89行目">
        </td>

td {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

Comments

[Lhankor_Mhy]

IE11でしたか……

[kansai5963]

ご回答および訂正までいただきありがとうございます。
サンプル画面を見ると私のやりたい画面そのものなのですが、VisualStudioCodeのstyle.cssにcssを記入し、HTMLの訂正後のものをコピーしましたが、なぜか縦に表示されてしまいます。

[Lhankor_Mhy]

すみませんが、訂正前のものはIE11では動作しません。

訂正後のものは、width="212"を、width="312"に変えるだけです。そのほかの変更点はありません。CSSも不要です。

訂正後のサンプルは以下の通りです。

https://jsfiddle.net/Lhankor_Mhy/0efd942c/1/

もしこれでも縦になるようでしたら、もう少し値を増やしてみてください。

Answer 3

できるだけ元のコードを変更しないように書いてみました。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <tr>
            <td align="center" height="47" width="212">
                <input type="text" name=kosu style="background:white; color:#000000;" align="middle" value="86行目">
            </td>
            <td align="center" height="47" width="212">
                    <input type="text" name=kosu2 style="background:white; color:#000000;" align="middle" value="87行目">
            </td>
        </tr>
        <tr>
            <td align="center" height="47">
                <input type="text" name=kosu3 style="background:white; color:#000000;" align="middle" value="88行目">
            </td>
            <td align="center" height="47">
                <input type="text" name=kosu4 style="background:white; color:#000000;" align="middle" value="89行目">
            </td>
        </tr>
    </table>

</body>

</html>

Comments

[kansai5963]

ご回答ありがとうございます。
また、説明不足で大変申し訳ございません。
記載コードの上下にも<td>があるため、1つの<td>の中で横並びにさせる方法を探しております。

[YakumoSaki]

でしたら、<td>の中に<table>を入れてしまう手もあります。