html - テーブル TD 幅のオーバーフロー 相対幅

Question

私はかなり長い間この問題に苦しんでおり、問題の適切な解決策を見つけることができません。

私が持っているもの：

<div style="width:150px; border:1px solid #000;overflow: auto;">
    <div>SOME TEXT</div>
    <table style="width:100%; border:1px solid #0F0;">
        <tr>
            <td>HEAD1</td>
            <td>HEAD2</td>
            <td>HEAD3</td>
        </tr>
        <tr>
            <td colspan="3">
                <div style="overflow: auto; border:1px solid #F00;">
                    <table>
                        <tr>
                            <td>HEAD</td>
                            <td>HEAD</td>
                            <td>HEAD</td>
                            <td>HEAD</td>
                            <td>HEAD</td>
                        </tr>
                        <tr>
                            <td>QQQQ</td>
                            <td>QQQQ</td>
                            <td>QQQQ</td>
                            <td>QQQQ</td>
                            <td>QQQQ</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>

http://jsfiddle.net/37ExS/

説明：

外側の div は、いくつかの他の div とデータを含むテーブルを含む固定のコンテンツ ラッパーを表します。データ テーブルの内部には行があり、その上の行を参照して詳細なデータを含む別のテーブルが含まれています。

私が欲しいもの：

詳細テーブルを含む、現在 colspan が "3" のテーブル セルには、スクロールバーを作成するオーバーフロー コンテンツが必要です。そのため、コンテンツを別の div でラップしましたが、div の幅は、親 (TD) の幅ではなく、コンテンツによって決定されるようです。内側の div に固定幅を設定することはできますが、コンテンツ ラッパーの幅が本当にわからないため、動的に設定したいと考えています。

それが理解できたことを願っています。

アップデート：

これはどのように動作するべきかです: http://jsfiddle.net/eRA33/

私はそれを使用してそれについてうまくいくことができましたが、クロスブラウザのサポートについては本当に知りません。私には少しハックに見えます。