Liste déroulante déformée à l'intérieur d'une table HHTML

Je souhaite concevoir un formulaire composé d'une table dotée d'une zone de texte et d'une liste déroulante. Lorsque j'ai ajouté la liste déroulante, le formulaire est déformé. J'ai ces problèmes: 1) la liste est si large. Je dois faire sa largeur correspond au texte le plus large. 2) La hauteur des cels a également augmenté.Liste déroulante déformée à l'intérieur d'une table 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>

NOTE: Il y a une troisième colonne non représenté sur l'image. Il contient un bouton comme indiqué dans le code.

Source

2017-05-25 user7945230

s'il vous plaît partager votre code – Chris

@Chris je l'ai fait maintenant. – user7945230

Hey, j'ai juste essayé votre code dans ** [jsBin] (http://jsbin.com/yijofihawa/edit?html,js,output) ** et il n'y a rien de mal à cela. Ce doit être un problème avec css, pouvez-vous partager votre code CSS? – Sumit

Le problème semble être dans l'en-tête de votre table. Vous avez 2 colonnes dans la première rangée et 3 colonnes dans la deuxième rangée.

Pour conserver la symétrie utiliser le code normalisé suivant:

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

Ce que je l'ai fait est, j'ajouté standard et de la table HTML, et ajouté 3ème colonne dans la en-tête Action. Vous pouvez le renommer en fonction de vos besoins.

Vous devrez également vérifier votre CSS. Cela pourrait affecter la forme que vous avez créée!

Source

2017-05-25 11:52:57

Liste déroulante déformée à l'intérieur d'une table HHTML

Répondre

Questions connexes