まだデータがありません。
テーブルにスクロールバーをつける「Scroll Table」
当ページのリンクには広告が含まれています。
スポンサーリンク
テーブルにスクロールバーをつけることができるプラグイン「Scroll Table」を紹介します。
jQueryプラグイン「Scroll Table」
このプラグインを使えば、テーブルにスクロールバーをつけることができるので、やたらと長いテーブルを見やすくすることができますね。
また、データベースからテーブル要素をセレクトするため、テーブルがどのくらいの長さになるかわからない! といった場合に便利なプラグインです。
スポンサーリンク
それではデモページをテーブルをスクロールしてみてくさい。
デモのソース(HTML + jQuery)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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> <script> $(function(){ $('.scrollTable').scrolltable({ stripe: true, oddClass: 'odd' }); }); </script> <style> table.scrollTable{ width:100%; border:1px solid #ddd; } thead{ background-color: #eee; } </style> </head> <body> <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"> <thead> <tr> <th>項目1</th> <th>項目2</th> <th>項目3</th> <th>項目4</th> <th>項目5</th> </tr> </thead> <tbody> <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> </tbody> </table> </body> </html>
スポンサーリンク