「スクロール可能なテーブル表示」をクロスブラウザ対応で

掲題の通り、一定範囲の高さ、幅を超える場合にスクロールバーを表示させるというテクニックについて。

現在仕事で携わっているプロジェクトでも使っている技なのですが、これが見事にIEのみに対応。ものにも拠りますが、Firefox等で見ると結構崩れて見えてしまいます。

そこで、社内プロジェクトで同じ技術を使う場合の事を考えて、複数のブラウザでも一通り見える手法・技術を採用しようと思っています。

適用させたいブラウザは

• Internet Explorer 6.x(XP)
• Internet Explorer 7.x(XP/Vista)
• Firefox 2.x以上(XP/Vista)
• Safari(XP/Vista)
• Opera(XP/Vista)

辺りを。上に行くほど優先度は高目で。

適用するポイントとしては

• 大前提として、上記に挙げたブラウザで問題無く表示・動作する事
• 理解及び導入が簡単である事

とりあえず、「CSS　テーブル　スクロール」辺りでググり、目ぼしいものをピックアップ。

• (1).「オレがルールだ！」：HTML TABLEタグでヘッダを固定にしてデータ部だけスクロール その２
• (2).「オレがルールだ！」：HTML TABLEタグでヘッダを固定にしてデータ部だけスクロール その３
• (3).Lazycircus Annex: 〔DSG〕 CSS を使ったスクロールバー付のテーブル
• (4).404 Blog Not Found:CSS - スクロール可能なテーブル w/o JavaScript
• (5).DataTable - Scrolling (YUI Library)

それぞれの対応詳細はこんな感じで。○：問題無く見える、×：残念ながら…　です。

No.	CSS利用	Js利用	縦ｽｸﾛｰﾙ 対応	横ｽｸﾛｰﾙ 対応	ブラウザ					メモ
					IE6.x	IE7.x	Firefox2.x	Safari	Opera
(1).	○	−	○	×	○	○	○	○	○	・大外枠の幅指定(witdh:100%;)を任意の幅(px)で調節すればかなりいい感じ ・ヘッダ複数行は微妙…要調査
(2).	○	○	○	○	○	○	○	○	○	・Super Tablesというライブラリを使用 ・Js利用の為、読み込みに若干時間を要する ・デフォルトで縦横ｽｸﾛｰﾙ可能っぽい ・個別の使用方法あり(要調査) ・ヘッダ複数行も現時点では微妙？(要調査)
(3).	○	○	○	×	○	×	○	○	○	・IE7.xのみ全く見えない状態 ・CSSのみで構成、しかしサンプルコード的なものは無し…
(4).	○	−	○	×	○	○	○	○	○	・CSSのみ利用 ・大外枠ﾃｰﾌﾞﾙ幅をpx指定する必要あり ・記述量は一番少なく、簡単である
(5).	○	○	○	○	○	○	○	○	○	・今回の候補の中では一番メジャー？ ・ｽｸﾛｰﾙﾊﾞｰのｻﾝﾌﾟﾙﾍﾟｰｼﾞはこちら ・(2)同様Javascriptを利用しており、ﾘﾛｰﾄﾞに若干時間が掛かる ・個別の利用方法あり、要調査

CSSのみで表示に掛かる時間を出来るだけ減らしたかったのですが、どうやらCSSのみでは制限を強いられそうですね…。

Javascriptを併用している(2),(5)に関しては若干リロード時間が掛かり、気になるところではありますが(特に表示件数が多くなった場合など)、今回の要件を満たすためにはしょうがない部分として割り切るしかなさそうですね…。

今後の事を考えると、Super TablesよりもYUIの方が後に続きそうかな？サンプルページ見ながら実装してみようと思います。