R42日記スマートフォン用の表示で見るR42日記この日記は私的なものであり所属会社の見解とは無関係です。takahashikznITmediaに寄稿しました。Webサービス好評頂いています→[クラウド帳票エンジンDocurain]2011-02-20"overflow:auto"&固定テーブルヘッダJavascript最近、いまさらですがjQuery始めました。</table></div>なんてやりますが、overflowってヘッダ行(th)を固定してくれないので、ヘッダ行ごとスクロールしちゃう。これはExcelに慣れた身からすると、やや不便。作ってみたそこで、overflow:autoを適用しつつ、自動的に固定ヘッダを表示してくれるスクリプトを、jQueryの練習も兼ねて書いてみました。僕が書いたスクリプトの特徴は『素直なやり方』ということ。実行後はタダのHTMLです。『テーブルのTHタグを取り出して、固定ヘッダとしてのテーブル要素を新規に追加する』だけ。スクリプトの半分以上の処理は単なるサイズ調整です。サイズ調整も、ピクセル単位で細かく計算しているわけではなくパーセンテージで合わせているだけ。スクリプトやスタイルシートの調整が入りまくったテーブルに対して適用しても、副作用が少ないウィンドウのリサイズに対応(2011/03/02追記、ウィンドウリサイズ対応用のスクリプトを足しました)というメリットがあります。テーブルにoverflow:autoを適用し、ヘッダ行を固定化します。※テーブルの中身は由緒正しくtheadとtbodyで囲まないとダメ。固定ヘッダを表示するテーブルの高さ(オプション)。デフォルト値は550px。対象のテーブルをdivで囲む。});}僕の環境では大体うまく動いてます。一応はスクロールバーのサイズを計算して調整していますが、ヘッダ列とデータ列の位置を、ピクセル単位でピッタリ合わせているわけではないです。CSSを、なんとなく違和感がないように後付で調整する*1ことで誤魔化してます。見で気が付かなければ、まぁいいかな、と。ぶっちゃけ手抜きです。めんどくさいんだもん。不具合や、『jQueryの???を使うと、もっと短く書けるよ!』などがあったらお知らせ下さい。忙しくなければ出来る限り対応します。それにしてもjQueryってなんだか楽しいですね。ワンライナーに目一杯、処理を詰め込めるところが特に。ソースは壊滅的に読みづらくなるけど。『何でもワンライナーでやっちまうのが好き!』という方にはピッタリ。2011-02-22追記サンプルのアプリケーション込みの全体のHTMLはコチラ。そのまま実行できます。テーブルにoverflow:autoを適用し、ヘッダ行を固定化します。※テーブルの中身は由緒正しくtheadとtbodyで囲まないとダメ。固定ヘッダを表示するテーブルの高さ(オプション)。デフォルト値は550px。対象のテーブルをdivで囲む。昔、Velocityを激しく改造したプログラミング言語(もちろん処理...2010-07-25動的に作成したtableタグにtheadを設定するJavascriptでtableを動的に作成する場合、IEではtbodyが必要。JSONの順序について月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。