第二頁的Firefox打印表

我在頁面頂部有一個小標題，然後是一個包含大量動態數據的表格。第二頁的Firefox打印表

打印時，數據偶爾會落在分頁符的邊緣。舉個例子。

如果表中有19行或更少的行，它將全部打印在1頁上。
如果有20行或21行，它會將整個表格扔到第二頁上。
如果有22點或更多的行其表，它會在第二頁

上打印第一頁上20和2我不介意的第一或第三的場景，但我不知道關心第二。我意識到這是我的OCD踢，但似乎有人會知道它的修復。

這似乎只發生在Firefox。在Chrome中，表格總是會在18行之後分裂。 IE10似乎也總是分成18行。

我試過以下的各種可能的變化：

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

進出口使用bootstrap3，如果有差別。

注意：您可以通過更改打印縮放在一頁上打印所有內容，但我不希望我的用戶這樣做。

注意：我意識到我可以做一個黑客檢查多少行，如果它落在壞範圍，添加或刪除頁面上的某個填充。但我寧願以正確的方式做，假設有一個。

UPDATE：我發現只有當Firefox處於100％縮放設置時，纔會發生這種情況。當您將其設置爲「縮小至適合」時，其行爲與其他瀏覽器的行爲相同。即使變焦設置爲100％，IE10也會正常運行。

來源

2013-10-03 Todd Horst

你可以嘗試添加CSS： table {page-break-before: avoid;}

來源

2013-10-03 21:26:25

沒有工作對我來說 –

你可以把你的TR內標籤，但作爲股利不列入支持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-13 09:08:22 raushan

第二頁的Firefox打印表

回答

相關問題