くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Bootstrap > jQuery.floatTheadでスクロールしても常にテーブルヘッダを表示する

jQuery.floatTheadでスクロールしても常にテーブルヘッダを表示する

Bootstrap HTML jQuery

テーブルの列が多くなると、スクロールしてもテーブルヘッダが見えなくなってしまう。。。

テーブルヘッダの固定して、スクロールしても常に表示されるようにした際の、備忘録。

便利なjQueryプラグイン(jQuery.floatThead)があったので、それを使ってみた

使い方

使い方はこんな感じ

<html>
<head>
・・・
<!-- Include Floaing Table Header -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/1.4.5/jquery.floatThead.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var $table = $('table');
  $table.floatThead({
      top:50,
      responsiveContainer: function($table){
          return $table.closest('.table-responsive');
      }
  });
});
</script>
</head>

<body>
・・・
</body>

</html>

jQuery.floatTheadはCDNが用意されているので、そっちを利用

<script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/1.4.5/jquery.floatThead.js"></script>

あとはテーブルに対して、floatThead()をするだけ。

<script type="text/javascript">
$(document).ready(function(){
  var $table = $('table');
  $table.floatThead({
      top:50,
      responsiveContainer: function($table){
          return $table.closest('.table-responsive');
      }
  });
});
</script>

Bootstrap3と一緒に使うときの注意

ここではまった。。。

  1. .teble-responsiveを使っているときは、responsiveContainerを設定する
  2. jQuery.floatTheadのUsageにあるとおり
  3. レスポンシブテーブルを利用しているときは、設定が必要
  4. <nav class="navbar">を使っているときは、top:50を追加する
  5. 設定しないと、ウィンドウの上部に固定されるので、ナビゲーションの後ろに隠れてしまう。
  6. topで、固定する位置を調節できるので、ナビゲーションの下に固定されるように設定

以上！！

参考にしたサイト様