html+CSSでテーブルのスクロール（位置固定）

質問

助けてください。

たとえば、１０項目の列を持つテーブルがあったとします。
レコード件数は１００件だとします。
画面に表示できるのは５項目、１０件だとした場合、

そのテーブルに対して縦横スクロールバーを
つけるのですが、その際に縦スクロールバーを下に動かした場合、
<th>列名だけはスクロールさせず、レコード部のみスクロールさせたいです。
また、横スクロールバーを右に動かした場合、５項目は固定で６項目目以降をスクロールさせたいです
※エクセルのウインドウ枠の固定　を適用したイメージ

htmlとスタイルシートで実現できますでしょうか？

回答No.1

tah3 · ベストアンサー

こういうことですね。

参考URL：

http://www.otchy.net/20100308/jquery-tablefix-js-had-released/

お礼

リンク、ありがごうございました！
jqueryは使用したことがないので
勉強させていただきます。

本当に画面デザインは奥が深いというか難しいですね

回答No.2

ORUKA1951

そのような長いtableでしたら、
<table summary="何たらの表">
　<caption>なんたら</caption>
　<thead>
　　<tr>
　　</tr>
　</thead>
　<tfoot>
　　<tr>
　　</te>
　<tfoot>
　<tbody>
　　<tr>
　　</tr>
　　<tr>
　　</tr>
　</tbody>
</table>
のようにマークアップされているはずです。
　<thead>をfixedで固定してしまえば、期待通りになるはずです。ただIEという糞ブラウザはとても難しいです。
以前、
テーブルをスクロールさせるときのスクロールの位置 - HTML - 教えて！goo ( http://okwave.jp/qa/q7105490.html )
で散々悩まされました。
　今はjQueryでそれを行うこともできるかと思います。

　しかし、マークアップには<thead><tfoot>をきちんとマークアップしてください。印刷するとその効果がわかります。※なおscreen用のスタイルシートはmedia=screenに指定しておいたほうが良いです。もいしにちほせすにみかには適用しないようにしておかないと、折角のマークアップが役立ちません。

お礼

回答ありがとうございました！
IE６も実装できないといけなくて。。。

本当に貴重な情報提供していただきありがとうございます