Question

我的页面顶部有一个小标题，然后是一个包含大量动态数据的表格。

打印时，数据偶尔会出现在分页符的边缘。所以举个例子。

如果表格中有19行或更少的行，则会在1页上打印。
如果有20行或21行，则会将整个表格抛出第二页。
如果表格中有22行或更多行，则会在第一页上打印20页，在第二页上打印2页

我不介意第一或第三种情况，但我不关心第二种情况。我意识到这是我的强迫症，但似乎有人会知道它的修复。

这似乎只发生在Firefox中。在Chrome中，表格将始终在18行后分割。 IE10似乎总是分裂，也是18行。

我尝试过以下各种可能的变体：

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

我使用bootstrap3，如果这有所不同。

注意：您可以通过更改打印缩放将所有内容打印在一个页面上，但我不能指望我的用户这样做。

注意：我确实意识到我可以做一个黑客，比如检查多少行，如果它落在坏范围内，在页面的某处添加或删除一些填充。但我宁愿以正确的方式去做，假设有一个。

更新：我发现只有当Firefox处于100％缩放设置时才会发生这种情况。当您将其设置为“Shrink To Fit”时，其行为与其他浏览器一样。即使缩放设置为100％，IE10也能正常运行。

Answer 1

您可以尝试添加css： table {page-break-before: avoid;}

Answer 2

你可以把你的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 }

}

第2页的Firefox打印表

2 个答案: