jquery.scrolltable.jsを使って縦長のtable(表)にスクロールバーを表示する方法をご紹介します。
Contents
縦長のtableにスクロールバーを表示するCSSの記述
※jquery-ui.cssファイルを読み込みます。その他table(表)のcss記述です。必要に応じて変更して下さい。
<style type="text/css"> <!-- body{ text-align: center; font-size: 24px; font-weight: bold; } h1{ text-align: center; padding: 10px 0 0 0; font-size: 24px; font-weight: bold; } p{ font-size: 18px; } #controls{ padding: 0.3em 1em; } table.scrollTable{ width:100%; border:1px solid #ddd; } thead{ background-color: #eee; } thead th{ text-align: center; padding:0.1em 0.3em; } tbody td{ border-top:1px solid #eee; border-right:1px solid #eee; padding:0.1em 0.3em; } tbody tr.odd td{ background-color: #f9f9f9; } --> </style> <link rel="stylesheet" href="https://code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css" type="text/css" />
縦長のtable(表)にスクロールバーを表示するJavaScriptの記述
※jquery.min.js、jquery-ui.min.js、jquery.scrolltable.jsファイルを読み込みます。スクロールバーを表示・非表示するボタンクリック処理です。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script> <script type="text/javascript" src="jquery.scrolltable.js"></script> <script type="text/javascript"> $(function(){ $('#removeScroll').click(function(){ $('.scrollTable').scrolltable('destroy'); }); $('#applyScroll').click(function(){ $('.scrollTable').scrolltable({ stripe: true, oddClass: 'odd' }); }); $('#applyScroll').trigger('click'); }); </script>
縦長のtableにスクロールバーを表示するHTMLの記述
※縦長のtable(表)を用意しました。必要に応じて変更して下さい。
<h1>縦長のtable(表)にスクロールバーを表示・非表示する</h1> <p>「スクロール無し」をクリックするとスクロールバーを非表示に、<br>「スクロール有り」をクリックするとスクロールバーを表示します。</p> <div id="controls"> <button id="removeScroll">スクロール無し</button> <button id="applyScroll">スクロール有り</button> </div> <br> <table class="scrollTable" cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th width="10%" style="width:10%">列1</th> <th>列2</th> <th style="width:80px">列3</th> <th width="40%">列4</th> </tr> </thead> <tbody> <tr> <td>行1</td> <td>行1いくつかのコンテンツを含むセル</td> <td>行1</td> <td>行1内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行2</td> <td>行2いくつかのコンテンツを含むセル</td> <td>行2</td> <td>行2内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行3</td> <td>行3いくつかのコンテンツを含むセル</td> <td>行3</td> <td>行3内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行4</td> <td>行4いくつかのコンテンツを含むセル</td> <td>行4</td> <td>行4内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行5</td> <td>行5いくつかのコンテンツを含むセル</td> <td>行5</td> <td>行5内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行6</td> <td>行6いくつかのコンテンツを含むセル</td> <td>行6</td> <td>行6内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行7</td> <td>行7いくつかのコンテンツを含むセル</td> <td>行7</td> <td>行7内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行8</td> <td>行8いくつかのコンテンツを含むセル</td> <td>行8</td> <td>行8内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行9</td> <td>行9いくつかのコンテンツを含むセル</td> <td>行9</td> <td>行9内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行10</td> <td>行10いくつかのコンテンツを含むセル</td> <td>行10</td> <td>行10内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行11</td> <td>行11いくつかのコンテンツを含むセル</td> <td>行11</td> <td>行11内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行12</td> <td>行12いくつかのコンテンツを含むセル</td> <td>行12</td> <td>行12内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行13</td> <td>行13いくつかのコンテンツを含むセル</td> <td>行13</td> <td>行13内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行14</td> <td>行14いくつかのコンテンツを含むセル</td> <td>行14</td> <td>行14内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行15</td> <td>行15いくつかのコンテンツを含むセル</td> <td>行15</td> <td>行15内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行16</td> <td>行16いくつかのコンテンツを含むセル</td> <td>行16</td> <td>行16内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行17</td> <td>行17いくつかのコンテンツを含むセル</td> <td>行17</td> <td>行17内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行18</td> <td>行18いくつかのコンテンツを含むセル</td> <td>行18</td> <td>行18内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行19</td> <td>行19いくつかのコンテンツを含むセル</td> <td>行19</td> <td>行19内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行20</td> <td>行20いくつかのコンテンツを含むセル</td> <td>行20</td> <td>行20内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行21</td> <td>行21いくつかのコンテンツを含むセル</td> <td>行21</td> <td>行21内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行22</td> <td>行22いくつかのコンテンツを含むセル</td> <td>行22</td> <td>行22内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行23</td> <td>行23いくつかのコンテンツを含むセル</td> <td>行23</td> <td>行23内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行24</td> <td>行24いくつかのコンテンツを含むセル</td> <td>行24</td> <td>行24内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行25</td> <td>行25いくつかのコンテンツを含むセル</td> <td>行25</td> <td>行25内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行26</td> <td>行26いくつかのコンテンツを含むセル</td> <td>行26</td> <td>行26内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行27</td> <td>行27いくつかのコンテンツを含むセル</td> <td>行27</td> <td>行27内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行28</td> <td>行28いくつかのコンテンツを含むセル</td> <td>行28</td> <td>行28内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行29</td> <td>行29いくつかのコンテンツを含むセル</td> <td>行29</td> <td>行29内部により多くのコンテンツを含むセル</td> </tr> <tr> <td>行30</td> <td>行30いくつかのコンテンツを含むセル</td> <td>行30</td> <td>行30内部により多くのコンテンツを含むセル</td> </tr> </tbody> </table>
縦長のtable(表)にスクロールバーを表示・非表示するデモページ
縦長のtable(表)にスクロールバーを表示・非表示するデモページ
ソース元:jquery-scrolltable
以下がソース元です。
jquery-scrolltable
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告