web-dev-qa-db-ja.com

CSSレイアウトを使用して多くの列/行を持つHTMLテーブルを印刷しますか？

HTMLから大きなテーブル（その行が約3枚の用紙幅になるほど大きい）を印刷したい。可能であれば、CSSはレイアウトに十分であり、ソリューションは異なるブラウザーで動作するはずです。

現在、次のスタイルルールを定義しています。

table { page-break-inside:auto; }
tr    { page-break-inside:auto; }

DOM要素を検査するときFirefox 33.0.2（OS X）では、ルールが認識されていることがわかりますが、印刷プレビューを見ると（ File | Print | [〜＃〜] pdf [〜＃〜] | プレビューでPDFを開く）最初のページに収まらないすべての列が切り取られます。つまり、3の代わりに1ページの印刷出力が表示されます。InternetExplorer 11と10も同じ効果を試しました。

では、CSSを使用して印刷するために、大きなHTMLテーブル（列と行の両方の面で非常に大きい）をどのようにレイアウトできますか？

ボーナスの質問： this 前の回答に示されているように、改ページスタイルのコンポーネントが実際にブロックレベルの要素にのみ適用される場合、divsではなくtdsからテーブルを構築すると役立ちますか？印刷出力を目指すとき

[〜＃〜] update [〜＃〜]

これは、JSFiddleで試したばかりの関連サンプルです。 （私はそこにアカウントを持っていないので、FWIKは直接リンクを提供できません。）

HTML：

<body>
<table>
<tr>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</td>
</tr>
</table>
</body>

CSS：

table { page-break-inside:auto; }
td    { border:1px solid lightgray; }
tr    { page-break-inside:auto; }

このテーブルを印刷しようとすると（例： This Frame | Print Frame ... | [〜 ＃〜] pdf [〜＃〜] | プレビューでPDFを開く JSFiddleの Result OS Xおよび用紙サイズ/向きA4 /縦向きのFirefox 33.1で表示）1ページの出力が表示されます。最初の列と2番目の列を除くすべての列が切り取られます。

htmlcsslayoutprintinginternet-explorer-10
22
Drux

ページ上で読み取り可能な垂直印刷が必要な場合は、テーブルから離れる必要があります。表は、表データの場合にページに表示するのに最適ですが、フローを尊重しないため、印刷の実行可能なソリューションではありません。

あなたのためにこれを自動的に行うプラグインがあります（ これはここにあり、所属なし-Googleの結果のみ ）が、ここに例があります。これを使用するときは、_@media print_が適切にリストされていることを確認してください。ローカルでテストするには、それを_@media screen_に変更できます。

リストには_@page_ルールは表示されませんが、印刷プレビューで表示できます。

お役に立てれば：

ポートレートで印刷するためのフィドル

[〜＃〜] html [〜＃〜] 

_<section class="table">
  <div class="row">
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</div>
  </div>
</section>
_

[〜＃〜] css [〜＃〜] 

_@media print {
    @page {
      margin: 2.5cm;   
    }
    div.row > div {
      display: inline-block;  
      border: solid 1px #ccc;
      margin: 0.2cm;
    }
    div.row {
      display: block;
    }
}


.table {
    display: table;
    border-spacing: 2px;
}
.row {
    display: table-row;
}
.row > div {
    display: table-cell;
    border: solid 1px #ccc;
    padding: 2px;
}
_

編集-複数のページにわたって水平に印刷する：

さて、これはおそらくあまり一般的ではないユースケースであり、私たちはそれを使って間抜けなことをしなければなりません。これは不可解で不愉快なので、このステップごとに説明しようとします。

ここで横向きに印刷するためのフィドル！

[〜＃〜] css [〜＃〜] 

_@media print {
    @page {
      margin: 0;
    }
    body {
        height: 100%;
        width: 100%;
    }
    div.row > div {
      display: inline-block;  
      border: solid 1px #ccc;
      margin: 0.1cm;
      font-size: 1rem;
    }
    div.row {
      display: block;
      margin: solid 2px black;
      margin: 0.2cm 1cm;
      font-size: 0;
      white-space: nowrap;
    }
    .table {
        transform: translate(8.5in, -100%) rotate(90deg);
        transform-Origin: bottom left;
        display: block;
    }
}
_

これは重要な部分です。印刷ディレクティブを設定しているからです。これの大部分は、オリジナルで見たものです（私が遊んでいたときにいくつかの調整を加えました）。

重要な部分はここにあります：

_ .table {
     transform: translate(8.5in, -100%) rotate(90deg);
     transform-Origin: bottom left;
     display: block;
 }
_

私たちがしているのは、全体を横にフロップし、それを期待する場所にスライドさせることです。 translate(8.5in, -100%)はブラウザに伝えます–この要素を8.5インチ（米国の標準便箋の幅）右側にスライドし、高さの100％上にスライドします（マイナスは反対に上を示します）ダウン）。回転したときにページの上部に表示されるように、右に8.5インチスライドさせます。計算された高さまでスライドさせて、回転が発生したときにテーブルの左側にい隙間がないようにします。

次に、これらすべての計算を、ドキュメントフロー内の要素の通常位置の_bottom left_に関連して実行するように指示します。これにより、leftプロパティを設定することにより、このクレイジーな長いテーブルが右に回転するのを防ぎます。 bottomプロパティは、時計回りに4分の1回転させているので重要です。上からそれを行うと、ページから左に外れます。この四半期のターンは、transformステートメントの次の部分で説明されています：rotate(90deg);

出来上がり。 Thingは複数のページに印刷されます。

あなたが尋ねる前：いいえ。私が知っている要素内で改ページを防ぐ方法はありません。私はそれが不快で、ugく、すべてのごみだと知っていますが、与えられたツールでしか作業できません。

動作確認済みのFirefoxの更新： Firefox 33.1 on Mac

23
Josh Burgess

強制的に改ページしたい場合は、page-break-beforeまたはを使用する必要があります 改ページ後。スタイル要素には空でないブロックレベル要素を含める必要があり、絶対に配置できないことを知っておく必要があります。ただし、tables要素ではまったく一貫性がありません。最後の質問に進みます。はい、divsを使用してテーブルを構築する方が一貫性があります。

ただし、何を達成したいか（大きな水平テーブルを印刷すること）を考慮すると、3ページを1ページに収めようとしても、コンテンツが読み込めないため機能しません。 実際のところ、唯一のベストプラクティスは、代わりに垂直レイアウトを使用することです（印刷のみ、またはWebと印刷の両方）。

2
Pipo