css - 動的に追加された列のCSSオーバーフロー自動

Question

テーブル、内側の div、およびフィールドセットは、no. 列数が増加します。

http://jsfiddle.net/Fgj6Y/

1. 外側の div、フィールドセット、および内側の div の幅はそのままである必要があります。
2. td は固定幅でなければなりません。
3. オーバーフローした列は非表示にする必要があり、スクロールして表示できます。

私はこれを達成するのに苦労しています。それは私にとって良い方法とは思えないので、固定幅を設定したくありません。すべて/各コンテナーのオーバーフロー、空白の小道具を試しました。

<div style="border:1px solid gray;padding:1%">
        <fieldset style="border:1px solid red;border-radius:5px">
                <div style="overflow-x:auto;border:1px solid green">
                        <table width="100%" border="1" bordercolor="blue">
                                <tr>
                                        <td>Casual Leave</td>
                                        <td>AnnualLeave</td>
                                        <td>SickLeave</td>
                                        <td>Compassionate Leave</td>
                                        <td>Maternity Leave</td>
                                        <td>Another Leave</td>
                                        <td>Some Other Leave</td>
<td>Casual Leave</td>
                                        <td>AnnualLeave</td>
                                        <td>SickLeave</td>
                                        <td>Compassionate Leave</td>
                                        <td>Maternity Leave</td>
                                        <td>Another Leave</td>
                                        <td>Some Other Leave</td>

                                <tr>
                        </table>
                </div>
        </fieldset>
</div>