css - 水平方向にスクロールして外側の div を展開する内側の div

Question

子 div を外側の div 内にすべて 1 行で表示し、2 行目に落ちないようにするにはどうすればよいですか? 外側の 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>