テーブルのヘッダー固定化スクリプト！tableタグ複数行をスクロール対応する方法！jQueryプラグインFixed_midashiで簡単に実現！

トップ
プログラミング
jQuery
テーブルのヘッダー固定化スクリプト！tableタグ複数行をスクロール対応する方法！jQueryプラグインFixed_midashiで簡単に実現！

スポンサードリンク

テーブルのヘッダー固定化スクリプト！tableタグ複数行をスクロール対応する方法！jQueryプラグインFixed_midashiで簡単に実現！

2015年03月28日 [jQuery]

HTMLでテーブルを使う時で行数が多いとページング機能を実装したり、
スクロールできるようにすると思います。

JavaScriptでajaxを利用すれば、ページング機能を搭載することもできるので、
それほど苦労しませんが、問題はスクロール仕様を実装するときです。

単にheightを固定値に指定するだけでは、thなどの表の見出し部分まででスクロールされてしまいますよね。

こういう場合、特に行数が多い表って列名が隠れてしまうので、
何がどんな情報なのか分かりづらいくなってしまいます。

なので、表のヘッダ行を固定化させたいと思い、各種プラグインを使用したり、
自分で作成したりしましたが、どうも使いにくいのです。

というのは、tableタグの記述の仕方によっては動かない場合もあり、
すべてのtableタグを共通の記述にしないといけないという点で困っていました。

できれば、固定化させる部分だけ指定できたらいいものですが・・・。

なんて探っていたら素晴らしいスクリプトに出会えました！

Fixed_midashi.jsで簡単に表のヘッダを固定！

正直これはかなり使えると思います。

Fixed_midashiというJavaScriptのライブラリです。
このライブラリを読み込ませて、表内のtableタグに属性値を指定するだけで、
簡単にヘッダを固定することができました。

ものすごく使いやすい上に、汎用性が高く、
他のブラウザでも正常に動作するので一番おすすめですね。

仕組みとしては、表内のtrタグを自動判別してヘッダを固定化するため、
tableタグの記述の違いによる影響を受けにくいのです。

さらに素晴らしい点は、なんと複数行固定化することができます。

Fixed_midashiの使い方！

まずはプラグイン「Fixed_midashi」をダウンロードし入手します。

このプラグインのJSファイルを表のヘッダを固定化させたいページに記述します。

以下はサンプルソースですが、こんな感じに記述します。

<html>
<head>
<script src="./js/fixed_midashi.js"></script>
</head>
<body onLoad="FixedMidashi.create();">

<div style="height:100%;overflow:scroll;">
<table style="width:100%;" _fixedhead="rows:1; cols:1">
<tbody>
<tr><th>A列</th><th>B列</th><th>C列</th>
</tr>
<tr>
<td>値1</td><td>値2</td><td>値3</td>
</tr>
<tr>
<td>値4</td><td>値5</td><td>値6</td>
</tr>
</table>
</div>
</body>
</html>