検索
カレンダー
2009年10月
« 5月   11月 »
 123
45678910
11121314151617
18192021222324
25262728293031
ブログメニュー
Amazon検索
キーワード:

複数枚に渡るWebページ印刷時のヘッダ表示

2009年10月23日

大きなテーブルが含まれたWebページを印刷したいという要望をいただきました。

HTMLのheadタグの中で次のように指定することで、印刷時のみ適用されるスタイルシートを指定することができます。

<head>
  ...
  <link rel="stylesheet" type="text/css" href="print.css" media="print" />
  ...
</head>

普通のページなら、このスタイルシートの中でロゴとかメニューのスタイルをdisplay:none;にするだけなのですが、ページの中に大きなテーブルが存在するときは、もうひと工夫必要です。

大きなテーブルを印刷すると、途中で改ページされた場合に2ページ以降はヘッダが表示されなくなる場合があります。テーブルのヘッダを2ページ以降も表示するようにするためには、cssファイルに次のような定義を追加し、テーブルのヘッダにしたい行をtheadタグで囲んでください。

thead {
  display: table-header-group;
}

規約では、デフォルトで設定されているはずなので、ブラウザによってはそのままで表示されるかもしれません。