複数の行にあるHTMLテーブルtdの整列

Question

私は以下の方法で表示する必要があるEmpの詳細と個人情報の詳細を持つフォームを開発しようとしています。

これは、問題は、テキストボックスが同じラインではなく、フォームが奇妙に見えている私のコード

  <table style="border: 1px solid; width: 900px; height: 200px; table-layout:fixed"> 
 

 
      <tr> 
 
      <td> 
 
      <label for="Employee" style="height:20px">Employee:</label> 
 
      </td> 
 
      <td> 
 
      <label for="Id" style="height: 20px">Id</label> 
 
      </td> 
 
      <td> 
 
      <input type="text" id="txtId" /> 
 
      </td> 
 
      <td> 
 
      <label for="Designation" style="height:20px">Designation</label> 
 
      </td> 
 
      <td> 
 
      <input type="text" id="txtDesig" /> 
 
      </td> 
 
      </tr> 
 

 
     
 
      <tr> 
 
      <td></td> 
 
      <td> <label for="Mail" style="height: 20px">Mail</label></td> 
 
      <td> <input type="text" id="Text3" /> </td> 
 
      <td> <label style="height: 20px">Ext</label> </td> 
 
      <td> <input type="text" id="Text4" /> </td> 
 
      </tr> 
 

 
      <tr> 
 
      <td> 
 
      <label for="PersonalInfo" style="height:20px">Personal Info:</label> 
 
      </td> 
 
      <td> 
 
      <label for="Name" style="height:20px">Name:</label> 
 
      </td> 
 
      <td> 
 
      <input type="text" id="txtName" /> 
 
      </td> 
 
      </tr> 
 

 
      <tr> 
 
      <td> 
 
      </td> 
 
      <td> 
 
      <label for="City" style="height:20px">City:</label> 
 
      </td> 
 
      <td> 
 
      <input type="text" id="txtCity" /> 
 
      </td> 
 
      </tr> 
 

 
      <tr> 
 
      <td> 
 
      </td> 
 
      <td> 
 
      <label for="State" style="height:20px">State:</label> 
 
      </td> 
 
      <td> 
 
      <input type="text" id="txtState" /> 
 
      </td> 
 
      </tr> 
 
      </table>

です。

Answer 1

私はあなたには、いくつかの理由のためにテーブルを使用する必要が推測していますか？そうでない場合は、もう少し実用的なものを使用することに移行することを検討しますこのようなことのためにテーブルは扱いにくいです。列ベースのアプローチを持つことはもっと意味があります。

テーブルでこれを行うには、それらをネストする必要があります。私はあなたにそれをする方法のアイデアを与えるためにテーブルの一部だけをしました。コピーしないでください。読めるようにIDを取り出しました。あなたは明らかにそこにそれらを望むでしょう。また、コードスニペットを実行するときは、幅が1500に設定されているので、左にスクロールしてください。これをコードに適用すると編集できます。あなたが必要としているところまで幅：33％を変更するだけです。

<table style="border: 1px solid; width: 1500px; height: 400px;"> 
 
    <tr> 
 
    <td style="width:33%;"> 
 
     <label style="height:20px; width:33%;">Employee:</label></td> 
 
    </td> 
 
    <td style="width:33%;"> 
 
     <table> 
 
      <tr> 
 
      <td><label height: 20px ">Id</label></td> 
 
      <td><input type="text " /></td> 
 
      <td><label id="lblDesig " height: 20px">Mail</label></td> 
 
      <td><input type="text" id="txtDesig" /></td> 
 
      </tr> 
 
      <tr> 
 
      <td><label style="height:20px;">Designation</label</td> 
 
      <td><input type="text" id="txtDesig" /></td> 
 
      <td><label id="lblId" height: 20px ">Ext</label></td> 
 
      <td><input type="text" id="txtDesig" /></td> 
 
      </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

あなたは次のように起動することができます。

table{border: 1px solid; width: 1500px;} 
 
     table tr td label{width: 95px;display: inline-flex;}

<table> 
 
    <tr> 
 
    <td> 
 
     <label>Employee:</label> 
 
    </td> 
 
    <td> 
 
     <label id="lblId">Id</label> 
 
     <input type="text" id="txtId " /> 
 
     <label id="lblDesig">Designation</label> 
 
     <input type="text" id="txtDesig" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td> 
 
     <label id="Label3">Mail</label> 
 
       <input type="text" id="Text3 " /> 
 
       <label id="Label4 ">Ext</label> 
 
     <input type="text" id="Text4" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <label>Personal Info:</label> 
 
    </td> 
 
    <td> 
 
     <label>Name:</label> 
 
     <input type="text" id="txtName" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 

 
    </td> 
 
    <td> 
 
     <label>City:</label> 
 
     <input type="text" id="txtCity" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 

 
    </td> 
 
    <td> 
 
     <label>State:</label> 
 
     <input type="text" id="txtState" /> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 3

通常、テーブルをレイアウトのために使用すべきではありません。ブートストラップグリッドシステムとフォームを使用することをお勧めします：http://getbootstrap.com/css/#grid

これはあなたにモダンな/プロフェッショナルな外観を提供するだけでなく、さまざまな解像度/デバイスをうまく処理します。ここで

は簡単な例です：

<div class="row"> 
    <div class="col-lg-2"> 
     <label>Employee</label> 
    </div> 
    <div class="col-lg-5"> 
     <div class="form-group"> 
      <label for="Id" class="col-sm-2 control-label">ID</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="Id"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="Mail" class="col-sm-2 control-label">Mail</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="Mail"> 
      </div> 
     </div> 
    </div> 
    <div class="col-lg-5"></div> 
</div>