非常に幅の広いレポート テーブル (数十列、かなりの水平スクロール) を含む Web ページがあります。window.print() でページを印刷しようとすると、ブラウザー (Firefox または Chrome) は 1 ページだけを印刷し、残りを切り取ります。
テーブルがより多くの(紙の)ページにオーバーフローすることを意味する場合でも、ブラウザにWebページ全体を印刷するように指示する方法はありますか?
テーブルは現在、表示または印刷用にスタイル設定されていません。
非常に幅の広いレポート テーブル (数十列、かなりの水平スクロール) を含む Web ページがあります。window.print() でページを印刷しようとすると、ブラウザー (Firefox または Chrome) は 1 ページだけを印刷し、残りを切り取ります。
テーブルがより多くの(紙の)ページにオーバーフローすることを意味する場合でも、ブラウザにWebページ全体を印刷するように指示する方法はありますか?
テーブルは現在、表示または印刷用にスタイル設定されていません。
右側をクリッピングせずに非常に幅の広い HTML テーブルを印刷し、長い水平テーブルを含むページのスタイルシートを印刷 する と、CSS のみのアプローチを取らなければならない場合、ちょっと失敗しているように見えます。私が考えることができる唯一のことは、うまくいくかもしれません(そして、はい、私は試しました)
<style media="print">
table, table * {
display:inline-block;
}
table tr {display:block;}
table td {padding:10px;}
</style>
もちろん、これは通常のテーブル スタイルを廃止しようとしています。
http://jsfiddle.net/jfcox/WTRxm/を参照してください。印刷可能なバージョンについては、明らかにhttp://jsfiddle.net/jfcox/WTRxm/show/
Firefox と Chrome で動作するようです (つまり、各行のインライン ブロックとしてセルをフローします)。ただし、標準がこれについて何と言っているかはわかりません。走行距離は異なる場合があります。
編集:おまけとして、セルにカウンターを追加して、セルがどの列にあったかを知ることはそれほど難しくないようです(クロムでのみテストされています)。
<style media="print">
table, table * {
display:inline-block;
}
table tr {display:block;
counter-reset: section; }
table td {padding:10px;}
table td:before {
counter-increment: section;
content: counters(section, ".") " ";
}
</style>
現在、テーブルは表示または印刷用にスタイル設定されていません。
何故ですか?JavaScriptでもCSSでも、水平方向にスクロールされたコンテンツを印刷するようにブラウザを強制(トリック)する方法がないため、印刷用に指定されたスタイルシートを作成する方がはるかに優れています。
表形式のデータを他の方法で分割するか、その目的でスタイルシートを使用します。
これは、A ListApartに印刷するためのCSSの作成に関する記事です。幸運を祈ります。
print.css を作成して、印刷ページのコンテンツのスタイルを設定できます。次のようにページにリンクします。
<link rel="stylesheet" type="text/css" media="print" href="print.css" />