トップ  >  2015年  >  2015.02.15 [CSS][JavaScript] 表組のヘッダーを固定する
features
[CSS][JavaScript] 表組のヘッダーを固定する
2015.02.15記
縦に長い表組をスクロールするとヘッダー部分が隠れてしまい、列の項目名がわからなくなる場合があります。

以下のサイトを参考にスクロール時に表組のヘッダーの固定に挑戦してみようと思います。
http://weboook.blog22.fc2.com/blog-entry-353.html

HTML


<table class="counter">
  <thead>
    <tr>
      <th class="c1">列1<br>width: 10%</th>
      <th class="c2">列2<br>width: 15%</th>
      <th class="c3">列3<br>width: 25%</th>
      <th class="c4">列4<br>width: 20%</th>
      <th class="c5">列5<br>width: 30%</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="c1 c">&nbsp;</td>
      <td class="c2">&nbsp;</td>
      <td class="c3">&nbsp;</td>
      <td class="c4">&nbsp;</td>
      <td class="c5">&nbsp;</td>
    </tr>
    <tr>
      <td class="c">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="c">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

CSS


<style type="text/css">
.c1 { width: 10%; }
.c2 { width: 15%; }
.c3 { width: 25%; }
.c4 { width: 20%; }
.c5 { width: 30%; }
.counter thead { width: 560px; }

/* 表組の連番 */
.counter { counter-reset: cnt; } 
.c:before { counter-increment: cnt; content: counter(cnt); }

/* 表組ヘッダ固定 */
.fixed {
  position: fixed;
  top: 0px;
  z-index: 9999;
}
</style>

JavaScript(jQuery)


<script src="jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
  var h    = $('.counter thead');
  var hTop = h.offset().top;
  $(window).scroll(function () {
    if($(window).scrollTop() >= hTop) {
      h.addClass('fixed');
    } else {
      h.removeClass('fixed');
    }
  });
});
</script>

サンプル

列1
width: 10%
列2
width: 15%
列3
width: 25%
列4
width: 20%
列5
width: 30%
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
以下のページに適用してみました
http://www.keibunsya.co.jp/modules/features/index.php?content_id=20
前
2015.03.15 スマホサイト(1)
カテゴリートップ
2015年
次
2015.01.15 ベストセラー+2014

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999-2018 keibunsya all right reserved.