テーブルをスクロール

やりたいこと：

固定されるヘッダやフッタを持ち
それ以外はスクロールするテーブルを実現する！

普通に固定行列無しでテーブルをスクロールさせたいなら、
<table>を<div>で囲めばオッケーです！
でもこれじゃあ、カラムも一緒にスクロールしてしまいます。

固定した行列を持つテーブルの作成は
HTML、CSS、JavaScriptなど・・・色々なやり方があるらしいです。
とりあえず簡単そうな
JavaScriptのプラグインを使ってみました☆


まずやってみたのは、tablefix　
ダウンロード先はこちら

$(function()
{
    $('#tableid').tablefix({width:600, height:400, fixRows:1, fixCols:2});
    /* 
    widht:  　テーブル全体の幅
    height: 　テーブル全体の高さ
    fixRows:　テーブル上部の固定する行数
    fixCols:　テーブル左部の固定する列数
    */
});

これはとっても便利で簡単に使えました！
ただ、テーブルの最終行に余計な空白が入ったり
右端までスクロールすると固定行とスクロール行が
ずれてしまったりとゆうところがちょっと気になりました(´・ω・`)
そんな細かいデザインを気にしないなら全然使えます♪


次に試したのがSuper Tables
ダウンロード先はこちら

$(function()
{
    var myST = new superTable("myTableId", {
        cssSkin : "sDefault",
        headerRows : 1,
        fixedCols : 2,
        colWidths : [100, 230, 220, -1, 120, -1, -1, 120],
        onStart : function () {
                this.start = new Date();
        },
        onFinish : function () {
                alert("Finished... " + ((new Date()) - this.start) + "ms.");
        }
    });
    /*
    cssSkin:     テーブルのデザイン
    headerRows:  テーブル上部の固定する行数
    fixedCols:   テーブル左部の固定する列数
    colWidths:   左のカラムから順番に横幅を指定(-1は自動設定)
    onStart:     スクリプト開始時の処理
    onFinish:    スクリプト終了時の処理
    */
});

これは見た目がすごくきれいです！
さっきのtablefixで気になった部分も解消されてました！！
英語のページでちょっと戸惑うけど、とっても素晴らしいです(*´∀`*)+゜。・