HHTML表中的扭曲下拉列表

我想要設計一個由具有文本框和下拉列表的表組成的表單。當我添加下拉列表時，表單會變形。我有這些問題： 1）列表如此之廣。我需要使其寬度適合最寬的文本。 2）此外，celss的高度不知何故增加。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>

注：有在圖像中未示出的第三列。它包含一個如代碼所示的按鈕。

來源

2017-05-25 user7945230

請分享您的代碼 – Chris

@Chris我現在做過。 – user7945230

嘿，我剛剛在** [jsBin]（http://jsbin.com/yijofihawa/edit?html,js,output）**中試過你的代碼，並且沒有錯。它必須是一個問題與CSS，你可以分享你的CSS代碼？ – Sumit

問題似乎出現在表格的標題中。第一行有兩列，第二行有三列。

爲了保持對稱使用下列標準代碼：

<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>

我所做的是，我添加標準HTML表，並在加入第3列標題行動。你可以根據你的需要重命名它。

你也必須檢查你的CSS。它可能影響你創建的表單！

來源

2017-05-25 11:52:57

HHTML表中的扭曲下拉列表

回答

相關問題