テーブルにスクロールバーをつけることができるプラグイン「Scroll Table」を紹介します。
jQueryプラグイン「Scroll Table」
このプラグインを使えば、テーブルにスクロールバーをつけることができるので、やたらと長いテーブルを見やすくすることができますね。
また、データベースからテーブル要素をセレクトするため、テーブルがどのくらいの長さになるかわからない! といった場合に便利なプラグインです。
それではデモページをテーブルをスクロールしてみてくさい。
「Scroll Table」のデモ
デモのソース(HTML + jQuery)
< meta name = "description" content = "Scroll Table のデモでーす。" > |
< title >Scroll Table - jQuery Plugin Demo</ title > |
< link rel = "stylesheet" href = "//code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css" type = "text/css" /> |
< script src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" ></ script > |
< script src = "//ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js" ></ script > |
< script src = "jquery.scrolltable.js" ></ script > |
$('.scrollTable').scrolltable({ |
< p >< a href = "https://webkaru.net/jquery-plugin/scroll-table/" >「jQueryプラグインまとめ」に戻る</ a ></ p > |
< h1 >Scroll Table のデモでーす。</ h1 > |
< table class = "scrollTable" cellpadding = "0" cellspacing = "0" border = "0" > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
< tr >< td >ああああああ</ td >< td >いいいいいい</ td >< td >うううううう</ td >< td >ええええええ</ td >< td >おおおおおお</ td ></ tr > |
jsファイルのダウンロード、オプション詳細はこちらからどうぞ。