html - スクロールバーが div ではなくウィンドウに表示される

Question

コンテンツが広すぎると、div にスクロールバーを表示できません。代わりに、ウィンドウ自体に常にスクロールバーを表示します。オーバーフロー設定をいじってみましたが、うまくいきません。

jsフィドル

HTML

<table class="wrapper" cellSpacing="0" cellPadding="0">
    <tr>
        <td class="header">
            <div>
                <p class="title">HEADER</p>
                <p class="subtitle">subheader</p>
            </div>
        </td>
    </tr>
    <tr>
        <td class="content">
            <div class="clearfix">
                <div class="col4">
                    <div>
                        <label class="fieldname">Field 1</label>
                        <span class="fieldcontrol"><input type="text" id="Text1" /></span>
                    </div>
                    <div>
                        <label class="fieldname">Field 2</label>
                        <span class="fieldcontrol"><input type="text" id="Text2" /></span>
                    </div>
                    <div>
                        <label class="fieldname">Field 3</label>
                        <span class="fieldcontrol"><input type="text" id="Text3" /></span>
                    </div>
                    <div>
                        <label class="fieldname">Field 4</label>
                        <span class="fieldcontrol"><input type="text" id="Text4" /></span>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td class="footer">
            <div class="clearfix">
                <div class="left">
                </div>
                <div class="right">
                    <button type="submit">Ok</button>
                    <button>Cancel</button>
                </div>
            </div>
        </td>
    </tr>
</table>

CSS

.content > div
{
    overflow: auto;
}

テーブルを使ったヘッダー、ボディ、フッターです。本文では、div をテーブル セルの幅と高さ全体に広げたいと考えています。ウィンドウのサイズを変更するときは、ヘッダーとフッターのサイズを変更し続け、コンテンツが表示領域外にあるときに本文にスクロールバーを表示します。

ありがとう！