Zawiera tabelę wewnątrz div

Question

W tym przykładzie (http://jsfiddle.net/A8gHg/, również kod poniżej), spróbuj zmniejszyć okno tak, aby zmniejszyć rozmiar przykładowego.

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

Będziesz pamiętać, że pola tekstowe (prawidłowo) nie zawijać do nowych linii, ponieważ są one w poszczególnych <td> s.

Jednak zawierający div, oznaczony kolorem niebieskim, nie powoduje całkowitego zawinięcia tabeli.

W jaki sposób sprawić, by zawierający je div w pełni zawierał dziecko? table?

Answer 1

Edit:

Dodaj display:table do div owijania.

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