スクロール付のテーブルについて

質問

お世話になっております、このたびデザインで少々てこづって下りまして、ご助力願いたく投稿させていただきました。

デザイン的には上が（画像の水色の部分）が固定で、下（ピンクの部分）に縦のスクロールバーを付けてはみ出した分が見えるようにする。

そして下のスクロールバーを動かすとはみ出した上、下両方が動くようにしたいのですが…
どうしたものかと悩んでおります。

デザイン的には画像のようにしたいのですが…（一つ一つが離れているのは見やすくしたかったためです）
何か良い方法があれば教えてください。

回答No.2

noname#83877

theadとtbodyを使うとできたはずです。
tbodyにoverflow:auto;を指定します。

補足

回答ありがとうございます。
調べてみたのですが、
その方法は、IE非対応ではありませんか？

間違ってたらすいません

回答No.1

noname#100277

tableでは無くdiv等のブロック要素のCSSでサイズ指定すれば良いのでは？

補足

さっそくの回答ありがとう御座います。

質問するさいに言葉足らずで伝わりにくかったと思うのですが。

自分でもDIVで囲ってCSSを使用してスクロールバーを付けたのですがどうしても横幅が広くなってしまうと縦のスクロールバーが見えなくなってしまいます。

ちなみに私は
<div id=1>
<div id=2>
固定部分
</div>
<div id=3>
ピンク部分のテーブル
</div>
</div>
のような形にして
1には横スクロール
3に縦スクロールという感じにしたのですが…
そうすると1に入りきらない幅の場合3のスクロールが見えなくなるので…
幅も自由に変えられるわけではなくある程度狭い幅で多いものを表示しようとしているのです。