Chứa bảng trong div

Question

Với ví dụ này (http://jsfiddle.net/A8gHg/, mã cũng dưới đây), hãy thử làm cho cửa sổ của bạn nhỏ hơn sao cho kích thước của ví dụ bị đổ.

<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ạn sẽ lưu ý rằng hộp văn bản (chính xác) không được quấn vào dòng mới khi chúng ở riêng lẻ <td> s.

Tuy nhiên, có chứa div, được biểu thị bằng màu xanh dương, không bọc hoàn toàn bảng.

Tôi làm cách nào để chứa số div hoàn toàn chứa con table?

Answer 1

Edit:

Thêm display:table đến gói 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/