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

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

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

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

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

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

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

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

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

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

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

 

JavaScript 第5版

著者/訳者:David Flanagan

出版社:オライリー・ジャパン( 2007-08-14 )

定価:

Amazon価格:¥ 4,499

大型本 ( 704 ページ )

ISBN-10 : 4873113296

ISBN-13 : 9784873113296


「【JavaScript】ヘッダを固定したままテーブルにスクロールをつける」への5件のフィードバック

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

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

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

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

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

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

コメントを残す

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

2 × 5 =