Содержит таблицу в пределах div

Question

Учитывая этот пример (http://jsfiddle.net/A8gHg/, код также ниже), попробуйте сделать ваше окно меньше, чтобы размер примера был зажат.

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

Вы заметите, что текстовые поля (правильно) не переносятся на новые линии, поскольку они находятся в отдельных <td> с.

Однако содержащее div, обозначенное синим цветом, не полностью завершает таблицу.

Как я могу сделать содержащее div полностью содержать ребенка table?

Answer 1

Edit:

Добавить display:table к оберточной дел.

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