Contenir la table dans div

Question

Étant donné cet exemple (http://jsfiddle.net/A8gHg/, code également ci-dessous), essayez de réduire la taille de votre fenêtre de manière à ce que la taille de l'exemple soit écrasée.

<div style="background-color:blue"> 
    <table style="width:100%"> 
     <tr> 
      <td> 
       <input type="text" style="width:150px"/> 
      </td> 
      <td> 
       <input type="text" style="width:150px"/> 
      </td> 
      <td> 
       <input type="text" style="width:150px"/> 
      </td> 
      <td> 
       <input type="text" style="width:150px"/> 
      </td> 
      <td> 
       <input type="text" style="width:150px"/> 
      </td> 
     </tr> 
    </table> 
</div> 

Vous remarquerez que les zones de texte (correctement) ne pas envelopper de nouvelles lignes comme dans chaque <td> s.

Cependant, le div contenant, comme indiqué par la couleur bleue, n'emballe pas complètement la table.

Comment puis-je faire le contenu div contenir entièrement l'enfant table?

Answer 1

Edit:

Ajouter display:table à la div d'emballage.

<div style="background-color:blue;padding:5px;display:table;"> 
    <table style="margin:5px;"> 
     <tr> 
      <td> 
       <input type="text" style="width:150px"/> 
      </td> 
      <td> 
       <input type="text" style="width:150px"/> 
      </td> 
      <td> 
       <input type="text" style="width:150px"/> 
      </td> 
      <td> 
       <input type="text" style="width:150px"/> 
      </td> 
      <td> 
       <input type="text" style="width:150px"/> 
      </td> 
     </tr> 
    </table> 
</div> 

http://jsfiddle.net/A8gHg/11/