[JQuery] スクロールでTableのヘッダをシンプルに固定する(レスポンシブ対応)

行数の多いテーブルだと、スクロールしていくとヘッダ部分が消えてしまうので、固定したいときがあります。sそんなとき、なるべくシンプルにコーディングするには、固定用のテーブルを別に用意したほうがシンプルに済みます。

こんな感じで。

名前 性別 年齢
ハナ メス 5
モモ メス 6
コタロウ オス 8
ナナ メス 4
チョコ オス 5
モカ オス 6
リン メス 3
ココ メス 7
モコ オス 2
ラン メス 11
マロン オス 5
レオ オス 6
クルミ メス 8
コロ オス 9
ソラ オス 4
アズキ メス 5
アンズ メス 10
ココア オス 9
サクラ メス 7
メイ メス 9
タロウ オス 12
テン オス 16
ヒメ メス 4
フク メス 8
ルーク オス 6
ルナ メス 7
レオン オス 4
クッキー メス 13
クロ オス 5
チロル メス 6

 

はじめは、theadをposition:fixed;で固定しようかと試行錯誤したのですが、tableのborder幅に振り回されたり、レスポンシブで幅が変わるとうまく合わせられないとか、悪戦苦闘するうちに、固定用のtableを別途用意したほうがシンプルで簡単だという結論に至りました。

あらかじめ、列幅を決めておかないといけませんが、レスポンシブにも対応できます。

HTMLはこんな感じで。sheet がテーブル本体で、fixheader が固定用。

<table class="fixheader" style="display: none; position: fixed; top: 0;">
<thead>
<tr><th width="40%">名前</th><th width="30%">性別</th><th width="30%">年齢</th></tr>
</thead>
</table>

<table class="sheet">
<thead>
<tr><th width="40%">名前</th><th width="30%">性別</th><th width="30%">年齢</th></tr>
</thead>
<tbody>
<tr><td>ハナ</td><td>メス</td><td>5</td></tr>
<tr><td>モモ</td><td>メス</td><td>6</td></tr>
<tr><td>コタロウ</td><td>オス</td><td>8</td></tr>
<tr><td>ナナ</td><td>メス</td><td>4</td></tr>
<tr><td>チョコ</td><td>オス</td><td>5</td></tr>
<tr><td>モカ</td><td>オス</td><td>6</td></tr>
<tr><td>リン</td><td>メス</td><td>3</td></tr>
<tr><td>ココ</td><td>メス</td><td>7</td></tr>
<tr><td>モコ</td><td>オス</td><td>2</td></tr>
<tr><td>ラン</td><td>メス</td><td>11</td></tr>
<tr><td>マロン</td><td>オス</td><td>5</td></tr>
<tr><td>レオ</td><td>オス</td><td>6</td></tr>
<tr><td>クルミ</td><td>メス</td><td>8</td></tr>
<tr><td>コロ</td><td>オス</td><td>9</td></tr>
<tr><td>ソラ</td><td>オス</td><td>4</td></tr>
<tr><td>アズキ</td><td>メス</td><td>5</td></tr>
<tr><td>アンズ</td><td>メス</td><td>10</td></tr>
<tr><td>ココア</td><td>オス</td><td>9</td></tr>
<tr><td>サクラ</td><td>メス</td><td>7</td></tr>
<tr><td>メイ</td><td>メス</td><td>9</td></tr>
<tr><td>タロウ</td><td>オス</td><td>12</td></tr>
<tr><td>テン</td><td>オス</td><td>16</td></tr>
<tr><td>ヒメ</td><td>メス</td><td>4</td></tr>
<tr><td>フク</td><td>メス</td><td>8</td></tr>
<tr><td>ルーク</td><td>オス</td><td>6</td></tr>
<tr><td>ルナ</td><td>メス</td><td>7</td></tr>
<tr><td>レオン</td><td>オス</td><td>4</td></tr>
<tr><td>クッキー</td><td>メス</td><td>13</td></tr>
<tr><td>クロ</td><td>オス</td><td>5</td></tr>
<tr><td>チロル</td><td>メス</td><td>6</td></tr>
</tbody>
</table>

 

JQueryは、スクロールでテーブルが一番上に来たら、固定用テーブル(fixheader)を表示させるだけの簡単なものです。

ただし、レスポンシブで幅が変わったときのために、$(window).resize でテーブル幅を一致させています。

<script>
            jQuery(function($){
                var tableSheet = $('table.sheet');
                var offset = tableSheet.offset();
                $('.fixheader').width(tableSheet.width());

                $(window).scroll(function () {
                    if($(window).scrollTop() > tableSheet.offset().top
                    && $(window).scrollTop() < (tableSheet.offset().top + tableSheet.height() ) ) {
                        var fixheaderTop = $(window).scrollTop();
                        $('.fixheader').show();
                    } else {
                        $('.fixheader').hide();
                    }
                });
                
                $(window).resize(function() {
                    $('.fixheader').width(tableSheet.width());
                });

            });
</script>
  • このエントリーをはてなブックマークに追加