web-dev-qa-db-ja.com

cssを使用して印刷する前にHTMLテーブルを拡大縮小する

HTMLドキュメントのコンテンツ全体としてのテーブルがあります（正当なテーブルの目的のために...レイアウトではなくテーブルデータです）。一部のセルには幅と高さが指定されています（CSSではなく、テーブル構造で古いサイズ変更インラインを使用しています）が、テーブル全体の幅と高さは指定されていません。これはかなり大きなテーブルですが、適切なスケーリング（約70％）で1枚の用紙にうまく収まるように印刷できます。これは、scale page IE、Firefox、Chromeのプリンター設定内で機能します。印刷スタイルシートの一部としてページ全体（私の場合はこのテーブルだけ）を拡大縮小する方法はありますか（@media print {}しかし、そこにある文は無視されています...問題は、印刷CSSの設定ではなく、スケーリングのための適切なコマンドにありますか？これで画面表示を拡大縮小できます：

body {
   transform: scale(.7);
}

ただし、印刷時には、Chrome（およびその他）はスケールを無視し、テーブルを用紙の幅に合わせて自動的にスケールします。その結果、テーブルが2ページ目に分割されます。これも成功せずに：

table {page-break-inside: avoid;}
csshtml-tableprinting-web-page
20
techtheatre

クラスとして適用されたパーセンテージサイズでテーブル全体を書き直し、印刷用にページをスケーリングすることができました。ブラウザーが変換に関する印刷スタイルを無視していた理由はわかりませんが、テーブルを固定サイズから比例サイズに変換することでCSSでスケーリングできるようになり、問題はなくなりました。

9
techtheatre

メディアタイプを使用する必要があります

@media print {
    body {transform: scale(.7);}
    table {page-break-inside: avoid;}
}

したがって、このスタイルは印刷プレビューモードでのみ適用されます。 http://www.w3.org/TR/CSS21/media.html

14
Dmitry

私は死者を上げていることを知っていますが、将来の検索結果の参照のために：

私はすべてのブラウザが高さを誤って計算し、単一のページで複数回繰り返してしまう超ワイドテーブルの問題に遭遇しました-私の解決策はズームを適用することでした：私たちのページが効果的に印刷に収まるようにした後、すべてのページの上部でtheadが適切に繰り返されました。おそらく、ズームを試しても、変換が機能しなかった場合は機能します。

7
TerraElise