縦に長いtableのヘッダーをstickyにするスクリプト・「jquery.stickyTableHeader 」jquery.stickyTableHeaderは縦に長くなったtableのヘッダをfixedにするスクリプトです。下にスクロールしてもヘッダだけ固定される、というよくあるやつ。theadタグが固定されます。使い方もシンプルで、tableを包括する要素にセレクタ指定するだけ。上に行ったり下に行ったりがなくなるので比較表なんかに導入すると喜ばれそうですね。 jquery.stickyTableHeader
CSSでヘッダを固定したスクロールテーブルを作る方法
CSSでヘッダを固定したスクロールテーブルを作る方法を紹介します。 １．はじめに 次のようなHTMLでテーブルを作成しました。 <style> table { border-collapse: collapse; border-spacing: 0; } th { background-color: #ccc; } th, td { border: 1px solid #666; padding: 5px; } .key, .value { width: 100px; } </style> <table> <thead> <tr><th class="key">キー</th><th class="value">値</th></tr> </thead> <tbody> <tr><td class="key">1</td><td class="value">aaa</td></tr> <tr>
[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify
ヘッダをスクロールしても上部にぺたっと貼りつくように表示し、ブレイクポイントを設定するとその地点で貼りつける要素を変更するjQueryのプラグインを紹介します。 デモページ：Optionsからちょい下にスクロール かなり下の方までスクロールすると、二番目のアイテムが上部に貼りつきます。 Clingifyの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <body> ... <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.clingify.js"></script> </body> Step 2: HTML スクロールしても上部に固定配置にする
[JS]表組みのヘッダを固定し、表示する列も選択できるスクリプト
左上のアローをクリックすると、チェックボックスが表示されます。 スクリプトはクッキーにも対応しており、選択した列をクッキーに保存することも可能です。 スクリプトはjQueryのプラグインのため、実装にはjquery.jsが必要です。 オプションでは、テーブルの幅と高さ、列選択の有無、クッキーの有無を設定できます。基本の書式は下記のようになります。 JavaScript <textarea name="code" class="js" cols="60" rows="5"> $(tableID).scrollableFixedHeaderTable(widthpx, heightpx, showSelect, cookie) </textarea>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery plugin: jQuery.FixedTable - Nova download
