內的div擴大與滾動的外層div水平

Question

如何讓孩子的div顯示所有在外DIV中一行不跌二線？ 外的div的寬度應該是固定的，因此滾動條應該是可見的，所以我們可以滾動查看所有內部的div。

http://jsfiddle.net/pkbkY/

<style type="text/css"> 
    .child 
    { 
     width: 100px; 
     float: left; 
    } 
</style> 

<div style="width: 500px; overflow: scroll;"> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 

Answer 1

在這裏你去：http://jsfiddle.net/thirtydot/pkbkY/1/

#scroll_container { 
    width: 500px; 
    overflow: scroll; 
    white-space: nowrap; 
} 
.child { 
    width: 100px; 
    display: inline-block; 
    border: 1px solid red; 
} 

如果需要消失的空白，最簡單的解決方法是刪除子元素之間的空白：http://jsfiddle.net/thirtydot/pkbkY/2/