tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)
2024/01/13
テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブルボディーをスクロールさせたい。jQuery decapitateというプラグインで実装できる模様。以下に実装方法をメモ。
ダウンロード先
https://github.com/claymation/jquery-decapitate
サンプル
https://taitan916.info/sample/decapitate/
ソース
<?php function makeRandStr($length) { $r_str = ''; $str = array_merge(range('a', 'z'), range('0', '9'), range('A', 'Z"')); for ($x = 0; $x < $length; $x++) { $r_str .= $str[rand(0, count($str)-1)]; } return $r_str; } ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery-decapitate</title> <link href="bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="bootstrap-responsive.min.css" rel="stylesheet" type="text/css" /> <link href="jquery.decapitate.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> <script src="jquery.min.js"></script> <script src="bootstrap-affix.js"></script> <script src="jquery.decapitate.js"></script> <script> $(document).ready(function() { $('table').decapitate(); }); </script> </head> <body> <table id="element-table" class="table table-bordered"> <thead> <tr> <th>seq</th> <th>str</th> <th>tag</th> </tr> </thead> <tbody> <?php for($i = 0; $i < 100; $i++){ ?> <tr> <td><?php echo $i;?></td> <td><?php echo makeRandStr(5);?></td> <td><?php echo ($i % 2 == 0) ? 'aaa': 'bbb';?></td> </tr> <?php } ?> </tbody> </table> </body> </html>
関連記事
-
-
jQueryのプラグイン(ColorPicker)でカラーコードを視覚的に選択させる方法
カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、 ...
-
-
CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成
CodeIgniter4.4.4&Bootstrap&jQuer ...
-
-
jquery.cookie.jsで保存期間を時間指定する方法
jquery.cookie.jsで保存期間を1時間等、時間指定したい。公式サイト ...
-
-
簡単にtable内をソート
やりたかった事は、 ・テーブル内でのソート ・内容は文字、数値、日時 ・PHPじ ...
-
-
jQueryにてCookieを取り扱う「jquery-cookie」プラグインの利用方法
jQueryでcookieを簡単に取り扱える「jquery-cookie」プラグ ...