redwarrior’s diary

C#, ASP.NET, WEB, G*などの雑多な情報

jQueryのfloatTheadプラグインを使用したテーブルを印刷する方法

少し前ですが、レコード数の多いテーブルを表示した時に、スクロールでExcelみたいに先頭行を固定して表示したい時に、jQueryのfloatTheadプラグインを使用しました。*1

さらにfloatTheadプラグインを使用したテーブルを印刷したいという要件が出た時に、そのままでは印刷レイアウトが崩れてしまったので、対処方法を調べました。

作者のGitHubのissueページに載っていました。

Support for printing tables · Issue #68 · mkoryak/floatThead · GitHub

内容を大まかにまとめると、 メディアクエリを使用してブラウザ表示か印刷かを判別し、 印刷の場合はtable要素のfloatThead('destroy')を呼び出し、 画面表示に戻ったら再度table要素のfloatThead()を呼び出す。 という感じです。

以上