Contiene tabla dentro de div

Question

Dado este ejemplo (http://jsfiddle.net/A8gHg/, código también a continuación), intente hacer que su ventana sea más pequeña de modo que el tamaño del ejemplo quede aplastado.

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

Usted notará que los cuadros de texto (correctamente) no envuelven a las nuevas líneas como lo son en individuales <td> s.

Sin embargo, el div, como se indica por el color azul, no envuelve completamente la tabla.

¿Cómo puedo hacer que el conteniendo div contenga completamente el niño table?

Answer 1

Editar:

Añadir display:table a la envoltura div.

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