【JavaScript】ヘッダを固定したままテーブルにスクロールをつける

テーブルが大きくなって来たときにテーブルにスクロールをつけたい時がある。

SuperTablesを使おうと思ったが。。。styleが自由に決められない。。。

そこで、なんとか簡単にスクロール出来ないものかとjavascriptで組んでみた。

スクロールをつけたいテーブルを<div>で括るだけで実装できる。

なかなかいいものができたな~

フッタも固定したいままの場合は<div class=”scrollFooterAri”>で括り、フッタは固定しない場合は<div class=”scrollFooterNashi”>で括るだけ。
なんとも簡単!!

まだまだバグも多いかもしれないけど、徐々に手直ししていこう。

※現在IE専用です。ASP.NETのGridView用に作りました。

サンプルはこちらです。要望などあればコメントください。

ヘッダを固定してテーブルにスクロールを付与

 [tmkm-amazon]4873113296[/tmkm-amazon]

スポンサード リンク
このエントリーをはてなブックマークに追加

5 thoughts on “【JavaScript】ヘッダを固定したままテーブルにスクロールをつける

  1. りん

    ヘッダを固定してテーブルにスクロールを付与について

    スクロールした後、画面を最大化OR縮小すると、ヘッダーの表示がテーブルの外に出てしまいます。
    この問題は解決可能なのでしょうか?

  2. だいすけ Post author

    コメントありがとうございます。
    確かにサンプルではヘッダが外に出てしまいますね。
    これはサンプルの親要素の幅が可変(幅指定なし)だからです。
    親要素が幅指定されていますと、この問題は発生しません。
    動作確認済みです。
    ご指摘ありがとうございます。

  3. AYUMU

    はじめまして。あゆむと申します。
    上記のサンプルはIE8では動作しませんでした。
    互換モードだと動作するので、これはソース内の

    を削除すると動作するように思えます。
    古い記事へのコメント、失礼しました。

  4. AYUMU

    ↑の記事ですが、肝心な部分が消えてしまいました。
    DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
    のタグを削除で行けると思います。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください