行数の多いテーブルだと、スクロールしていくとヘッダ部分が消えてしまうので、固定したいときがあります。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 が固定用。
| 名前 | 性別 | 年齢 |
|---|
| 名前 | 性別 | 年齢 |
|---|---|---|
| ハナ | メス | 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 |
JQueryは、スクロールでテーブルが一番上に来たら、固定用テーブル（fixheader）を表示させるだけの簡単なものです。
ただし、レスポンシブで幅が変わったときのために、$(window).resize でテーブル幅を一致させています。