table(テーブル)にスクロールバーを表示するjQueryプラグイン

公開日:  最終更新日:2015/12/10

tableにスクロールバーを実装出来るjQueryプラグイン
table(テーブル)を使って画像を並べたり、文字情報を一覧表示で掲載する時に行数が多くて全体のレイアウトが崩れてしまった。たくさんの情報を載せておきたいけど縦に長くなってしまうから情報を削っているなどテーブルタグで困ったことはありませんか?


テーブルのヘッダー部分を固定して内側だけスクロールバーで表示したいと考えたことがある人も多いのではと思います。

スポンサードリンク

TABLE(テーブル)にスクロールバーを実装するjQueryプラグインについて調べてみた


tableタグを使って表示する際に行数が多いテーブルになると縦に長くなってしまいますが、そんな時に使うと便利なjQueryプラグインを紹介したいと思います。

調べているとCSSなどで実装する方法もいくつか見つかりました。CSSだけで実装したいという方は下記を参考にしてみてください。

タイトルをロックして、データ部分を縦スクロール | 株式会社ゼノフィ

CSS でヘッダ固定、データ行を スクロールさせるテーブル – JavaScript スタイルシートサンプル集


さて、今回は異なる2つのjQueryプラグインについて紹介します。

1.jquery-tbodyscrollを使った方法

2.jquery-scrolltableを使った方法

どちらも、tableにスクロールバーを表示することが出来るjQueryプラグインです。縦に長いテーブルをすっきり見やすくすることができます。

jquery-tbodyscrollでスクロールバーを実装する方法

powerman/jquery-tbodyscroll · GitHub

「DownLoad Zip」をクリックすると必要ファイル一式ダウンロードすることが可能です。ダウンロードしたファイルの中からjquery-tbodyscroll.jsを使います。

また、他にもjQuery UIが必要ですが、jQuery UIでは、動作に必要なライブラリ/スタイルシートをCDN(Content Delivery Network)で提供されているので今回はそれを利用したいと思います。そのため、ダウンロードする必要はありません。

サンプルソース sample1.html

<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="jquery.scrolltable.js"></script>
<script>
$(function(){
$('.MyTable').scrolltable({
stripe: true,
oddClass: 'odd'
});
});
</script>
<style>
table.MyTable{
width:100%; 
border:1px solid #ddd;
}
thead{
background-color: #000;
color:#fff;
}
table.MyTable td{
text-align:center;
}
tr.odd td{
background-color: #EAEAEA;
}
</style>
<table class="MyTable" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>項目1</th>
<th>項目2</th>
<th>項目3</th>
<th>項目4</th>
</tr>
</thead>
<tbody>
<tr><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td></tr>
<tr><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td></tr>
<tr><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td></tr>
<tr><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td></tr>
<tr><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td></tr>
<tr><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td></tr>
<tr><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td></tr>
<tr><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td></tr>
<tr><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td><td><img src="画像URL"></td></tr>
</tbody>
</table>

1,2,3行目が必要なjQuery UI のファイルを読み込んでいる部分です。今回はCDN経由で利用しているのでダウンロードはしていません。

4行目 ダウンロードしたjquery-tbodyscroll.jsを読み込んでいます。

5行目から12行目がtableのスクロール表示を実装している部分です。$(‘.MyTable’)の記述で MyTableというクラス名のテーブルを指しています。

13行目から28行目 見た目を整えるためCSSをいくつか記述してます。実際に使う場合は調整してみてください。

あとはtableタグを記述している部分です。任意のクラス名を指定すること、thead、tbodyを分けて記述することが必要です。このプラグインはtbody部分にスクロールバーを表示するプラグインです。

jquery.scrolltableの動作サンプル

jquery-scrolltableでスクロールバーを実装する方法

th3uiguy/jquery-scrolltable · GitHub

「DownLoad Zip」をクリックすると必要ファイル一式ダウンロードすることが可能です。ダウンロードしたファイルの中からjquery.tbodyscroll.jsを使います。

また、jQueryを使いますのでjQuery本体をhttp://jquery.com/よりjquery.min.jsをダウンロードしてください。

サンプルソース sample2.html

<script src="jquery.min.js"></script>
<script src="jquery.tbodyscroll.js"></script>
<script>
$(document).ready(function() {
$('.MyTable').tbodyScroll({
thead_height:   '30px',
tbody_height:   '200px',
tfoot_height:   '20px',
head_bgcolor:   'gray',
foot_bgcolor:   'gray'
});
});  
</script>
<style>
th,td {
width: 180px;
text-align:center;
border: 1px solid #191970;
}
</style>
<table class="MyTable">
<thead>
<tr><th>注文日</th><th>画像</th><th>商品名</th></tr>
</thead>
<tbody>
<tr><td>2015/07/01</td><td><img src="画像URL"></td><td>商品名AAAA</td></tr>
<tr><td>2015/07/01</td><td><img src="画像URL"></td><td>商品名BBBBB</td></tr>
<tr><td>2015/07/01</td><td><img src="画像URL"></td><td>商品名CCCCCC</td></tr>
<tr><td>2015/07/02</td><td><img src="画像URL"></td><td>商品名DDDDD</td></tr>
<tr><td>2015/07/02</td><td><img src="画像URL"></td><td>商品名EEEE</td></tr>
<tr><td>2015/07/03</td><td><img src="画像URL"></td><td>商品名FFFF</td></tr>
<tr><td>2015/07/03</td><td><img src="画像URL"></td><td>商品名GGGGG</td></tr>
<tr><td>2015/07/04</td><td><img src="画像URL"></td><td>商品名HHHHH</td></tr>
</tbody>
<tfoot>
<tr><th>注文日</th><th>画像</th><th>商品名</th></tr>
</tfoot>
</table>

1,2行目で必要なjqueryのファイルを読み込んでいます。このサンプルはhtmlファイルと同一フォルダ内に配置した状態ですので、各自の環境に合わせて書きなおしてください。

3行目から13行目でスクロールバーを実装している部分です。$(‘.MyTable’)としてクラス名にMyTableと付けているtableが対象として指定しています。

また、オプションの指定として、ヘッダー、フッターの高さや背景色なども指定することが出来ます。

14行目から20行目でCSSを記述しています。見た目の調整する場合はここで調整してみてください。

22行目から39行目がTABLEタグを記述している部分です。thead、tbody、tfootと分けて記述しています。このtbody部分がスクロールバーの対象になります。

jquery-tbodyscrollの動作サンプル


いかがでしょうか。tableでレイアウトした別htmlファイルをiframeで読み込んでスクロールバー有りで表示すれば同じような表示にすることは出来ますが、利用する環境によっては、今回の方法が使える場面もあるかもしれません。ぜひ、活用してみてください。

<TABLE>の関連記事もよければご覧ください

テーブルのマウスオーバー時に行やセルの背景色を変更して表を見やすくする方法




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑