HHTMLテーブル内のドロップダウンリスト

テキストボックスとドロップダウンリストを持つテーブルで構成されるフォームを設計したいと考えています。ドロップダウンリストを追加すると、フォームが歪んで表示されます。私はこれらの問題があります： 1）リストはとても広いです。私はその幅を最も広いテキストに合わせる必要があります。 2）セルの高さもやや増えました。HHTMLテーブル内のドロップダウンリスト

<html> 

<head> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<meta charset="UTF-8"> 
</head> 

<body id="body"> 

<div id="wrapper"> 
<table align='center' cellspacing=1 cellpadding=1 id="data_table" border=1> 
<tr> 
<th>Name</th> 
<th>Type</th> 
</tr> 

<tr> 
<td><input type="text" id="text-field"></td> 

     <td><select name="D1"> 
     <option value="volvo">Volvo</option> 
     <option value="saab">Saab</option> 
     </select> </td> 
<td><input type="button" class="add" id="submit-button" value="Add Row"></td> 
</tr> 

</table> 
</div> 

</body> 
</html>

注：画像には示されていない3番目の列があります。コードに示されているようなボタンが含まれています。

出典

2017-05-25 user7945230

あなたのコードを共有してください – Chris

@Chris私は今でした。 – user7945230

ねえ、私はちょうど** [jsBin]（http://jsbin.com/yijofihawa/edit?html,js,output）**であなたのコードを試しました**それに何も間違っていません。それはCSSの問題でなければなりません、あなたのCSSコードを共有できますか？ – Sumit

問題は、テーブルのヘッダーにあるようです。最初の行に2列あり、2行目に3列あります。私は、標準およびHTMLテーブルの追加、およびに3列を追加し、私がやっていること

<thead> 
    <tr> 
     <th>Name</th> 
     <th>Type</th> 
     <th>Action</th> 
    </tr> 
</thead> 

<tbody> 
    <tr> 
     <td> 
      <input type="text" id="text-field"> 
     </td> 

     <td> 
      <select name="D1"> 
       <option value="volvo">Volvo</option> 
       <option value="saab">Saab</option> 
      </select> 
     </td> 
     <td> 
      <input type="button" class="add" id="submit-button" value="Add Row"> 
     </td> 
    </tr> 
</tbody>

次の標準化されたコードを使用する対称性を保つために

ヘッダーアクション。必要に応じて名前を変更できます。

あなたもCSSをチェックする必要があります。あなたが作成したフォームに影響するかもしれません！

出典

2017-05-25 11:52:57

HHTMLテーブル内のドロップダウンリスト

答えて

関連する問題