テーブルが大きくなって来たときにテーブルにスクロールをつけたい時がある。
SuperTablesを使おうと思ったが。。。styleが自由に決められない。。。
そこで、なんとか簡単にスクロール出来ないものかとjavascriptで組んでみた。
スクロールをつけたいテーブルを<div>で括るだけで実装できる。
なかなかいいものができたな～
フッタも固定したいままの場合は<div class=”scrollFooterAri”>で括り、フッタは固定しない場合は<div class=”scrollFooterNashi”>で括るだけ。
なんとも簡単！！
まだまだバグも多いかもしれないけど、徐々に手直ししていこう。
※現在IE専用です。ASP.NETのGridView用に作りました。
サンプルはこちらです。要望などあればコメントください。
[tmkm-amazon]4873113296[/tmkm-amazon]
ヘッダを固定してテーブルにスクロールを付与について
スクロールした後、画面を最大化OR縮小すると、ヘッダーの表示がテーブルの外に出てしまいます。
この問題は解決可能なのでしょうか？
コメントありがとうございます。
確かにサンプルではヘッダが外に出てしまいますね。
これはサンプルの親要素の幅が可変(幅指定なし)だからです。
親要素が幅指定されていますと、この問題は発生しません。
動作確認済みです。
ご指摘ありがとうございます。
ご回答ありがとうございました。
はじめまして。あゆむと申します。
上記のサンプルはIE8では動作しませんでした。
互換モードだと動作するので、これはソース内の
を削除すると動作するように思えます。
古い記事へのコメント、失礼しました。
↑の記事ですが、肝心な部分が消えてしまいました。
DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
のタグを削除で行けると思います。