2012-05-08 58 views
4

私は非常に幅広いレポートテーブルを持つWebページを持っています - 何十もの列、かなりの水平スクロール。 window.print()でページを印刷しようとすると、ブラウザ(FirefoxまたはChrome)は1ページを印刷して残りの部分をカットします。window.print()で巨大なテーブルを印刷すると1ページだけが印刷されます

さらに多くの(紙)ページにテーブルがあふれている場合でも、ブラウザに全面Webページを印刷する方法がありますか?

現在のところ、テーブルの表示や印刷は行われていません。

+0

あなたはhttp://stackoverflow.com/questions/1763639/how-to-deal-with-page-breaks-when-printing-a-large-html-table – JayC

+0

を確認したいかもしれません...テーブルが幅にぴったり合わないという問題がありますか? Hrm ... – JayC

+0

それはちょうど収まらない。私はテーブルが次のページにオーバーフローするように強制する方法があるのだろうかと思っています。 – abeger

答えて

0

print.cssを作成して、印刷ページの内容をスタイルすることができます。テーブルが現在どのような方法での表示や印刷のためにスタイリングされていない

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

:としてあなたのページにリンクします。

なぜですか?あなたは印刷用に指定されたスタイルシートを書く方がはるかに優れています。これは、ブラウザがJavaScript、CSSのどちらでも水平方向にスクロールされたコンテンツを印刷するように強制する(トリックする)方法がないからです。

は、表形式のデータを他の方法で分割するか、その目的のためにスタイルシートを使用します。

ここにはarticle on writing CSS for print on A List Apartがあります。幸いです。

2

Print a very wide HTML table without clipping right hand sidePrint Stylesheets for pages with long horizontal tables は、あなただけのアプローチ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> 
関連する問題