テーブルにスクロールバーをつける「Scroll Table」

当ページのリンクには広告が含まれています。

jQuery Plugin » テーブル » テーブルにスクロールバーをつける「Scroll Table」

テーブルにスクロールバーをつけることができるプラグイン「Scroll Table」を紹介します。

jQueryプラグイン「Scroll Table」

このプラグインを使えば、テーブルにスクロールバーをつけることができるので、やたらと長いテーブルを見やすくすることができますね。

また、データベースからテーブル要素をセレクトするため、テーブルがどのくらいの長さになるかわからない！といった場合に便利なプラグインです。

それではデモページをテーブルをスクロールしてみてくさい。

「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>

Scroll Table

jQueryプラグイン「Scroll Table」

デモのソース（HTML + jQuery）

関連記事（一部広告含む）