検索
カレンダー
2020年2月
« 4月    
 1
2345678
9101112131415
16171819202122
23242526272829
ブログメニュー
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;
}

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

コメントはまだありません »

コメントはまだありません。

TrackBack URL : http://www.meibinlab.jp/nishijima/archives/118/trackback

コメントする