「Jquery+CSS テーブルのヘッダ固定でスクロール」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

Jquery+CSS テーブルのヘッダ固定でスクロール

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Jquery+CSS テーブルのヘッダ固定でスクロール</title>
  6. <script href="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  8. <style type="text/css">
  9.   html, body {
  10.     margin:0;
  11.     padding:0;
  12.   }
  13.   
  14.   table {
  15.     margin:0;
  16.     border-collapse:collapse;
  17.     width: 100%;
  18.   }
  19.   
  20.   th {
  21.     border: 1px solid #000;
  22.     padding: 3px 8px;
  23.   }
  24.   
  25.   td {
  26.     border: 1px solid #000;
  27.     padding: 6px 8px;
  28.   }
  29.   
  30. </style>
  32. </head>
  33. <body>
  35. <h1>Jquery+CSS テーブルのヘッダ固定でスクロール</h1>
  36. <p>詳細はwikiの「<a href="//tips.recatnap.info/wiki/Jquery%2BCSS_%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E3%83%98%E3%83%83%E3%83%80%E5%9B%BA%E5%AE%9A%E3%81%A7%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%EF%BC%88wrapTblScroll()%EF%BC%89">Jquery+CSS テーブルのヘッダ固定でスクロール（wrapTblScroll()）</a>」。</p>
  38. <div class="wrapTblScroll">
  39.   <table>
  40.     <thead><tr><th>No</th><th>名前</th><th>金額</th></tr></thead>
  41.     <tbody>
  42.       <tr><td>1</td><td>鳥精肉</td><td>130円</td></tr>
  43.       <tr><td>2</td><td>手羽先</td><td>130円</td></tr>
  44.       <tr><td>3</td><td>砂肝</td><td>130円</td></tr>
  45.       <tr><td>4</td><td>ポンポチ</td><td>130円</td></tr>
  46.       <tr><td>5</td><td>ナンコツ</td><td>130円</td></tr>
  47.       <tr><td>6</td><td>ひな皮</td><td>130円</td></tr>
  48.       <tr><td>7</td><td>鳥レバー</td><td>130円</td></tr>
  49.       <tr><td>8</td><td>鳥ハツ</td><td>130円</td></tr>
  50.       <tr><td>9</td><td>つくね</td><td>130円</td></tr>
  51.       <tr><td>10</td><td>つくね梅じそ</td><td>140円</td></tr>
  52.       <tr><td>11</td><td>ナンコツつくね</td><td>140円</td></tr>
  53.       <tr><td>12</td><td>つくねチーズ</td><td>140円</td></tr>
  54.       <tr><td>13</td><td>激辛青南蛮つくね</td><td>140円</td></tr>
  55.       <tr><td>14</td><td>ピーマンの肉詰め</td><td>140</td></tr>
  56.       <tr><td>15</td><td>牛さがり</td><td>220円</td></tr>
  57.       <tr><td>16</td><td>牛タン串</td><td>300円</td></tr>
  58.       <tr><td>17</td><td>牛ヒレ串</td><td>390円</td></tr>
  59.       <tr><td>18</td><td>丸ごとシマウマ</td><td>250円</td></tr>
  60.       <tr><td>19</td><td>三元豚の豚精肉</td><td>140円</td></tr>
  61.       <tr><td>20</td><td>豚レバー</td><td>130円</td></tr>
  62.       <tr><td>21</td><td>P・トロ</td><td>140円</td></tr>
  63.       <tr><td>22</td><td>豚キムチ巻</td><td>130円</td></tr>
  64.       <tr><td>23</td><td>豚しそ巻き</td><td>130円</td></tr>
  65.       <tr><td>24</td><td>もちベーコン巻</td><td>140円</td></tr>
  66.       <tr><td>25</td><td>焼きおりぎりつくね風</td><td>130円</td></tr>
  67.       <tr><td>26</td><td>厚焼き玉子</td><td>130円</td></tr>
  68.       <tr><td>27</td><td>うずら玉子</td><td>130円</td></tr>
  69.       <tr><td>28</td><td>炙りカチョカヴァロ</td><td>160円</td></tr>
  70.       <tr><td>29</td><td>帆立バター醤油</td><td>190円</td></tr>
  71.       <tr><td>30</td><td>つぶ串</td><td>140円</td></tr>
  72.     </tbody>
  73.   </table>
  74. </div>
  76. <script type="text/javascript">
  77.   $.fn.extend({
  78.     wrapTblScroll: function(w, h) {
  79.       var w = w || 'auto';
  80.       var h = h || '300px';
  81.       
  82.       var execute = function(wrap) {
  83.         
  84.         $(wrap).css({'width': w, 'height':h, 'overflow':'auto', 'position':'relative', 'z-index':3});
  85.         
  86.         $(wrap).find('table').css({'position':'absolute', 'top':0, 'left':0, 'z-index':1, 'zoom':1});
  87.         
  88.         var addTbl = $(wrap).find('table').clone(true).addClass('__wTblScr').css({'z-index':2});
  89.         
  90.         $(addTbl).find('thead th').each(function() {
  91.           if ( $(this).css('background-color') == '' ) {
  92.             $(this).css({'background-color':'#fff'});
  93.           }
  94.         });
  95.         
  96.         addTbl.find('tbody').css({'visibility':'hidden'});
  97.         addTbl.find('tbody td').css({'padding-top':0, 'padding-bottom':0, 'border-top':'none', 'border-bottom':'none'});
  98.         $(addTbl).find('tbody td').each(function() {
  99.           this.innerHTML = '<div style="height:0; overflow:hidden">' + this.innerHTML + '</div>';
  100.         });
  101.         
  102.         addTbl.appendTo(wrap);
  103.       }
  104.       
  105.       $(this).scroll(function(){
  106.         $(this).find('.__wTblScr').css({'top': this.scrollTop})
  107.       });
  108.       
  109.       execute(this);
  110.     }
  111.   });
  112.   
  113.   $('.wrapTblScroll').wrapTblScroll('800px', '300px');
  114. </script>
  117. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  118. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  119. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  120. </div>
  122. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  123. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  124. </div>
  126. </body>
  127. </html>