Tableのヘッダーが見えなくならないようにスクロールに合わせて常に表示されるように付いてくるようにするコード

WS003042
このエントリーをはてなブックマークに追加
PR

WEBサイトに表を表示するときに、短めの表なら特に問題になることはないのですが、とても縦に長い表だと、どの列がどの項目かわかりづらかったりします。そんな時のこの手法を使えば、常にそういった項目を表示したままで見れるようにスクロールに合わせてテーブルのヘッダーが付いてくるようにする方法です。

 

 

Table with fixed header on scroll
By jgx

DEMO 表示

table2

 

スクロールに合わせて、テーブルのヘッダー部分が画面に表示されたままついてきます。テーブル部分が終わればちゃんと消えてくれます。

CSSの必要な部分、jQueryの必要な部分をコピペするだけで、簡単に実装できそうです。

 

 

コードのダウンロード

DOWNLOAD
PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)