7

ページの上部に小さなヘッダーがあり、次にかなりの量の動的データを含むテーブルがあります。

印刷時にデータが改ページの端に落ちることがあります。たとえば。

  • 表の行数が 19 行以下の場合、すべてが 1 ページに印刷されます。
  • 20 行または 21 行ある場合、テーブル全体が 2 ページ目にスローされます。
  • テーブルに 22 行以上ある場合、最初のページに 20 が印刷され、2 ページ目に 2 が印刷されます。

1番目と3番目のシナリオは気にしませんが、2番目のシナリオは気にしません。これは私のOCDが作動していることに気づきましたが、誰かがその修正を知っているようです.

これは Firefox でのみ発生するようです。Chrome では、テーブルは常に 18 行前後で分割されます。IE10 も常に 18 行で分割されているようです。

私は次の考えられるすべてのバリエーションを試しました：

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

それが違いを生む場合、私はbootstrap3を使用しています。

注：印刷ズームを変更することで、すべてを1ページに印刷できますが、ユーザーがそれを行うことは期待できません。

注：行数をチェックするようなハックを実行できることを認識しており、それが悪い範囲にある場合は、ページのどこかにパディングを追加または削除します。しかし、正しい方法があると仮定して、むしろ正しい方法で行いたいと思います。

更新: これは、Firefox が 100% ズーム設定の場合にのみ発生することがわかりました。「Shrink To Fit」に設定すると、他のブラウザと同じように動作します。IE10 では、ズームを 100% に設定しても正常に動作します。

4

2 に答える 2

0

tr をタグ内に配置できますが、div は tr をサポートしていないため、テーブルの構造を次のようにする必要があります

交換

<table>
<tr >

            <td class="fixture-table-header">Location Name</td>
            <td class="fixture-table-header">Fixture Type</td>
            <td class="fixture-table-header">Fixture Photo</td>
            <td class="fixture-table-header">Qty</td>
            <td class="fixture-table-header">Input Watts</td>
            <td class="fixture-table-header">Annual Hours</td>
            <td class="fixture-table-header">kW</td>
            <td class="fixture-table-header">Annual kWh</td>
            <td class="fixture-table-header">Total Utility Incentive Avaiable</td>
            <td class="fixture-table-header">Total Proposed Cost</td>
     </tr>
</table>

と

<table >        
    <tr>
    <td><div><table><tr style="page-break-inside : avoid">

            <td class="fixture-table-header">Location Name</td>
            <td class="fixture-table-header">Fixture Type</td>
            <td class="fixture-table-header">Fixture Photo</td>
            <td class="fixture-table-header">Qty</td>
            <td class="fixture-table-header">Input Watts</td>
            <td class="fixture-table-header">Annual Hours</td>
            <td class="fixture-table-header">kW</td>
            <td class="fixture-table-header">Annual kWh</td>
            <td class="fixture-table-header">Total Utility Incentive Avaiable</td>
            <td class="fixture-table-header">Total Proposed Cost</td>
     </tr></table></div></td>
</tr>
</table>

そして、このcssを追加します

@media print
{
       @page {size: landscape}  //optional  
      table { page-break-after:auto }//optional      
      div    { page-break-inside:avoid; page-break-after:auto }

}
于 2014-01-13T09:08:22.447 に答える