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

助けてください。

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

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

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

No.1 ベストアンサー 回答者： tah3 回答日時： 2012/10/25 23:46

こういうことですね。

参考URL：http://www.otchy.net/20100308/jquery-tablefix-js …

この回答へのお礼

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

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

お礼日時：2012/10/27 09:34

No.2 回答者： ORUKA1951 回答日時： 2012/10/26 08:50

そのような長い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://oshiete.goo.ne.jp/qa/7105490.html )
で散々悩まされました。
　今はjQueryでそれを行うこともできるかと思います。

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

この回答へのお礼

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

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

お礼日時：2012/10/27 09:33