[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 が固定用。

 

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

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

タイトルとURLをコピーしました